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内 容 提要 


本 书 共 包括 四 个 部 分 ， 共 13 章 。 第 一 部 分 介绍 了 HTML5 的 发 展 历程 ， 用 语义 元 素 构造 网 页 ， 编 写 更 
有 意义 的 标记 ， 以 及 构建 更 好 的 Web 表单 。 第 二 部 分 介绍 了 HTML5 中 的 音频 与 视频 、CSS3、Canvas 绘 区 
技术 等 内 容 。 第 三 部 分 介绍 了 数据 存储 、 离 线 应 用 、 与 Web 服务 器 通信 ， 以 及 HTML5 与 JavaScript 技术 的 
强大 结合 等 内 容 。 第 四 部 分 为 附录 ， 简 单 介 绍 了 CSS 和 JavaScript。 

本 书 既 适合 新 手 学 习 ， 也 能 助 有 经 验 的 Web 开发 人 员 解 决 日 常 工作 中 遇 到 的 难题 。 
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乍 一 看 ， 你 可 能 觉得 HTML5 是 网 页 编写 语言 HTML 的 第 5 个 版 本 。 但 实际 上 ， 这 背后 的 故事 
可 乱 得 多 。 

HTML5 是 一 个 叛逆 。 它 是 由 一 群 自 由 思想 者 组 成 的 团队 设计 出 来 的 ， 这 个 团队 的 成 员 并 不 
负责 制定 官方 HTML 标准。 它 人 允许 使 用 10 年 前 就 被 禁止 的 网 页 编写 方式 。 它 费 尽 心机 、 昔 口 效 心 
地 告诉 浏览 器 开发 商 怎 么 处 理 而 不 是 彻底 拒绝 标记 中 的 错误 , 它 最 终 实现 了 不 依赖 Flash 等 浏览 器 
插件 播放 视频 。 而且 它 引 入 了 一 大 批 JavaScript 驱 动 的 功能 , 让 网 页 可 以 像 传统 桌面 软件 那样 丰富 
多 彩 、 富 有 交互 能 

理解 HTML5 可 没有 那么 简单 。 最 主要 的 困难 在 于 人 们 用 HTML5 这 个 词 指 代 十 几 种 甚至 更 多 
独立 的 标准 。( 后 面 我 们 会 介绍 到 ， 这 是 HTML5 发 展演 进 的 结果 。 一 开始 时 它 只 有 一 个 标准 ,但 
后 来 就 拆 分 成 了 很 多 容易 管理 的 分 支 。) 事实 上 ，HTML5 现 在 代表 的 是 “HTML5 及 所 有 相关 标 
准 ”， 甚 至 还 可 以 更 宽泛 ,代表 “下 一 代 网 页 编写 技术 ”。 这 就 是 本 书 要 带领 大 家 探索 的 HTML5: 
既 包 括 HTML5 核 心 语言 ， 也 包括 与 HTML5 纠 缠 在 一 块 但 在 其 标准 中 永远 找 不 到 的 那些 新 功能 。 

于 是 , 第 二 个 困难 又 摆 在 了 你 的 面前 : 浏览 器 支持 。 不 同 的 浏览 器 支持 HTML5 的 程度 不 同 。 
最 差劲 的 是 IE8, 它 对 HTML5 的 支持 非常 有 限 , 目前 每 20 台 能 上 网 的 电脑 中 就 有 1 人 台 安装 着 IE8( 至 
少 本 书写 作 时 是 这 个 比例 ， 后 面 1.6.2 节 会 介绍 怎么 查 到 浏览 器 装机 统计 信息 )。 好 在 我 们 有 办 法 
弥补 浏览 器 支持 上 的 缺陷 , 但 有 的 办 法 简单 ， 有 的 办 法 也 不 讨 人 喜欢 。 根 据 在 今天 的 网 页 中 使 用 
HTML5 的 需求 ， 本 书 对 这 两 种 方法 都 会 适当 介绍 。 

抛 开 这 些 困 难 ， 有 一 个 事实 毫 无 争议 : HTML5 代 表 未 来 。 苹 果 、 谷 歌 和 微软 等 大 软件 公司 
都 在 易 力 支持 它 ，W3C ( World Wide Web Consortium， 万 维 网 联盟 ) 已 经 放弃 了 XHTML， 从 而 
使 HTML5 成 为 正式 标准 并 得 到 认可 。 如 果 你 在 看 这 本 书 ， 那 么 也 可 能 加 入 HIMLS 阵 营 ， 并 利用 
它 创 造 出 如 图 0-1 所 示 的 那 种 酷 炫 的 网 页 。 


阅读 本 书 的 条 件 


本 书 介绍 的 HTML5 是 HTML 标 准 最 新 最 好 的 版 本 。 虽 然 不 一 定 非得 是 标记 大 师 才 能 看 懂 这 本 

书 ， 但 阅读 本 书 的 的 确 确 还 是 需要 一 些 Web 设 计 经 验 的 。 以 下 就 是 几 个 必要 条 件 。 
口 写 过 网 页 。 本 书 假设 你 以 前 至 少 写 过 一 些 网 页 (或 者 至 少 知道 怎么 使 用 HTML 元 素 把 内 容 
分 成 标题 、 段 落 和 列表 ， 等 等 )。 如 果 你 刚刚 接触 Web 设 计 ， 那 最 好 是 先 找 一 本 合适 的 入 





















































































































































门 书 看 一 看 ， 比 如 我 的 Creating a Website: The Missing Manual, Third Edition。( 不 过 别 担 
心 ， 你 不 会 被 限制 在 过 去 的 技术 中 ， 这 本 书 里 的 示例 都 是 有 效 的 HTMLS 文 档 。) 



































号 ] CNHTML5NChapter 07\Maze.html pr ee 0-1: 在 Web 世 界 黑暗 的 过 去 ， 
Term 要 编写 网 页 游戏 ， 必 须 依赖 Flash 
这 样 的 浏览 器 插件 。 但 有 了 


























HTML5 的 新 功能 一 一 包括 canvas 
图 中 显示 的 就 是 ) 之 后 , 你 可 以 
使 用 可 靠 而 又 免 插 件 的 
JavaScript。 这 个 图 展示 的 是 用 
HTML5 技 术 开 发 的 迷 官 游戏 ( 第 
9 章 将 详细 讨论 ) 
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[Restart | | Load Easy Maze | | Load Hard Maze | 
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口 懂 样 式 表 。 没 有 CSS ( Cascading Style Sheet， 层 著 样 式 表 ) 就 没 如 今 的 网 站 。CSS 为 页 面 
提供 布局 和 格式 。 要 想 顺 利 阅读 本 书 ， 你 应 该 知道 样式 表 的 基本 知识 ， 包 括 怎么 创建 样 
式 表 , 里 面 都 有 什么 ,以 及 怎么 把 它 应 用 到 网 页 上 。 如 果 你 不 太 清 楚 CSS 是 干什么 的 ,可 
以 先 看 一 看 附录 A。 如 果 你 需要 更 多 帮助 ， 或 者 想 提 高 自己 的 CSS 技 能 ， 以 便 真正 做 出 漂 
亮 的 布局 和 样式 ， 建 议 你 看 看 David Sawyer McFarland 的 CSS3: The Missing Manual 
( O’Reilly )。 

口 懂 JavaScript。 当 然 ， 编 写 HTML5 页 面 用 不 着 JavaScript。 可 是 ， 如 果 你 想 使 用 HTML5 不 
计 其 数 的 强大 功能 一 一 比如 在 画布 上 画图 或 者 与 Web 服 务 器 通信 ， 那 就 需要 JavaScript 了 了 。 
如 果 你 有 一 些 浅显 的 编程 经 验 , 但 对 JavaScript 还 一 知 半 解 ,附录 B 可 以 帮 你 掌握 一 些 新 情 
况 。 不 过 ， 要 是 一 听 到 写 代 码 这 几 个 字 ， 马 上 就 像 被 帘 里 候 进 一 条 蜡 蛇 那样 魂飞魄散 ， 那 
要 么 你 根本 不 必 看 本 书 中 的 很 多 章节 了 ， 要 么 你 得 通过 David Sawyer McFarland 的 
JavaScript & jQuery: The Missing Manual (O'Reilly ) 补 补课 。 

如 果 这 些 必要 条 件 让 你 头 举 目眩 一 一 好 吧 ， 这 就 是 活 在 Web 设 计 最 前 沿 必须 付出 的 代价 。 
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编写 HTML5 


编写 HTML5 页 面 可 以 使 用 编写 HTML 页 面 时 使 用 的 软件 。 可 以 是 个 再 简单 不 过 的 文本 编辑 
器 ， 像 Windows 中 的 记事 本 ， 或 者 Mac 中 的 TextEdit。 目 前 也 有 很 多 设计 工具 ( 比如 Adobe 
Dreamweaver 和 Microsoft Visual Studio ) 提供 了 快速 创建 新 HTML5 文 档 的 模板 。 不 过 ，HTML5 页 
面 的 基本 结构 确实 非常 简单 ， 任 何 网 页 编辑 软件 ( 即使 不 是 为 HTML5 设 计 的 ) 都 没有 问题 。 




















注意 当然 啦 ， 不 管 你 上 网 和 编写 网 页 时 用 的 计算 机 是 Windows PC， 还 是 最 新 的 MacBook Pro， 
同样 也 无 所 谓 ， 因 为 HTML5 与 操作 系统 无 关 。 


查看 HTML5 


现在 ,任何 浏览 器 的 最 新 版 本 都 能 支持 大 多 数 的 HTML5 功 能 ， 包 括 那 些 在 人 苹果 和 Android 设 
备 上 运行 的 移动 版 浏览 器 。 只 要 你 的 浏览 器 是 最 新 的 ，HTML5 就 可 以 出 色 地 运行 ， 因 此 就 可 以 
用 来 测试 本 书 中 的 示例 。 

目前 ， 还 没有 一 款 浏览 器 巨细 靡 遗 地 支持 HTML5 的 所 有 功能 ，HTML5 本 身 就 是 一 大 批 互相 
关联 的 标准 也 是 其 中 一 个 原因 。 谷 歌 Chrome 在 对 HTML5 的 支持 方面 通常 处 于 领跑 地 位 ，Firefox 
和 Opera 紧 追 不 舍 ，Safari 也 尾随 其 后 ，IE 的 差距 则 一 直 很 大 。 老 版 本 下 是 真正 的 老大 难 问题 ， 这 
些 正 不 能 升级 ， 主 要 是 因为 它们 都 运行 在 Windows Vista 或 Windows XP 这 样 老 掉 牙 的 操作 系统 上 
( 这 两 个 操作 系统 仍然 跑 在 世界 1/5 的 台式 机 中 )。1.6 节 会 更 全 面 地 探讨 这 个 问题 ,并 给 出 应 对 建议 。 


什么 时 候 可 以 使 用 HTML5 


简短 的 答案 是 “现在 "。 就 连 遭 人 唾弃 的 IE6， 这 个 问世 长 达 10 年 之 入、 补丁 所 补丁 的 家 伏 都 
可 以 显示 基本 的 HTML5 文 档 。 这 是 因为 创建 HTML5 标 准时 ， 就 想 让 它 能 涵盖 并 扩展 原来 的 
HTML 。 

更 详尽 的 答案 是 “ 视 情 况 而 定 ”。 前 面 刚 刚 提 到 过 ，HTML5 是 一 组 不 同 标准 的 集合 ， 浏 览 需 
对 这 些 标准 有 着 不 同 程度 的 支持 。 因此 , 尽管 现在 任何 Web 开 发 人 员 都 可 以 转 而 编写 HTMLS 文 档 
(谷歌 YouTube 和 Wikipedia 等 很 多 大 型 网 站 已 经 这 样 做 了 ), 但 要 放心 地 使 用 HTMLS 的 全 部 新 奇 
功能 一 一 至 少 不 必 针对 那些 不 够 开化 的 浏览 器 采取 变通 手段 ， 殴 怕 还 要 再 过 一 些 时 日 。 













































































注意 在 告诉 读者 使 用 某 项 HTML5 新 功能 之 前 ,我们 会 明确 指出 该 功能 得 到 了 哪些 浏览 器 的 支 
持 。 当 然 ， 浏 览 器 版 本 变化 得 比较 快 ， 如 果 你 担心 使 用 某 功能 会 有 问题 ， 最 好 还 是 随时 
查阅 某 些 资料 。 在 此 ， 推 荐 大 家 使 用 http:Wcaniuse.com， 通 过 这 个 网 站 可 以 查 到 任何 一 项 
功能 ， 以 及 哪个 浏览 器 的 哪个 版 本 支持 它 。( 1.6.1 节 还 将 详细 介绍 如 何 使 用 这 个 网 站 。) 
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作为 有 标准 意识 的 开发 人 员 , 慌 怕 你 也 对 这 些 标准 什么 时 候 正式 颁布 感 兴趣 。 但 这 个 问题 有 
点 复杂 ， 因 为 设计 HTML5S 的 人 遵循 的 理念 有 点 不 合 常规 。 他 们 经 常 说 ， 正 式 的 标准 中 怎么 说 并 
不 重要 ， 关 键 是 有 没有 浏览 器 支持 。 换 句 话 说， 只 要 你 觉得 可 行 ， 现 在 就 可 以 采用 任何 你 想 使 用 
的 功能 。 但 不 少 开发 人 员 、 大 公司 、 政 府 机 关 以 及 其 他 组 织 , 通常 会 根据 一 种 语言 的 标准 是 否 正 
式 颁 布 来 判断 是 否 可 以 采用 它 。 

在 本 书写 作 时 , HTML5 正 处 于 候选 推荐 标准 ( candidate recommendation ) 阶段 。 这 意味 着 标 
准 很 大 程度 上 已 经 尘埃 落 定 , 但 浏览 器 开发 商 仍 然 在 完善 自己 的 实现 。 而 进入 下 一 个 (也 是 最 后 
一 个 ) 阶段 , 也 就 是 推荐 标准 (recommendation ) 阶段 ,可 能 要 等 到 2014 年 年 底 。 在 此 期 间 , W3C 
已 经 发 布 了 HTML5.1 的 工作 草案 ( working draft )。( 要 了 解 这 两 个 版 本 的 区 别 , 请 看 下 面 的 附注 )。 

























































































HTML5 与 HTML5.1 的 区 别 

HTML 又 有 新 版 本 了 ? 怎么 又 多 出 来 一 个 空格 呢 ? 

正如 我 们 将 在 第 1 章 介绍 的 ,HTML5 经 过 了 两 个 组 织 之 手 。 整 个 过 程 因此 遗留 了 一 些小 问 
题 ， 包 括 一 个 有 点 轻微 “分 裂 ” 的 版 本 系统 。 

最 初 制定 HTML5 规 范 的 人 ( 即 WHATWG 成 员 , 将 在 1.1.3 节 介绍 ) 对 版 本 号 不 太 “ 感 冒 ”， 
他 们 认为 HTML5 是 一 门 “ 活 的 ”语言 ， 鼓 励 Web 开 发 者 关注 浏览 器 的 支持 情况 ， 而 非 版 本 号 。 

可 是 ，WHATWG 把 HTML5 交 给 了 W3C 官 方 ， 以 便 W3C 把 它 制 定 完成 。W3C 是 一 个 严谨 、 
细致 的 组 织 ， 项 望 区 分 最 初 发 布 的 HTML5 和 后 来 经 过 改进 的 版 本 。 因 此 ，W3C 决 定 将 最 初 发 
布 的 HTML5 命 名 为 HTML 5.0 ( 注意 空格 )， 第 二 次 发 布 的 版 本 就 是 HTML 5.1， 第 三 次 发 布 时 
就 叫 HTML 5.2。 真 够 乱 的 ， 所 有 这 些 版 本 其 实 都 还 是 HTML5。 

顺便 说 一 下 ， 后 续 几 个 版 本 的 HTML5 标 准 不 可 能 再 有 大 的 改动 了 。 如 果 有 新 功能 ， 也 会 
以 独立 的 、 补 充 性 的 规范 形式 发 布 。 这 样 ， 少 数 几 个 人 很 快 就 可 以 制定 新 的 HTML5 功 能 规范 ， 
而 不 必 等待 对 整个 语言 的 修订 。 


本 书 内 容 
本 书 把 完整 的 HTML5 教 程 分 为 13 章 ， 具 体内 容 如 下 。 
第 一 部 分 : 现代 标记 


口 第 1 章 介 绍 HTML 发 展 到 HTML5 的 历程 。 我 们 会 看 一 看 HTML5 文 档 的 样子 ， 看 看 它 跟 以 

前 的 HTML 有 何不 同 ， 另 外 也 看 一 下 浏览 器 的 支持 情况 。 

口 第 2 章 讨论 HTMLS 的 语义 元 素 (Semantic element )， 也 就 是 一 组 可 以 为 标记 赋予 含义 的 元 
素 。 恰当 地 使 用 这 些 元 素 , 可 以 让 浏览 器 、 屏 幕 阅读 器 、Web 设 计 工 具 以 及 搜索 引擎 基于 
它们 提供 的 额外 信息 更 智能 地 工作 。 

口 第 3 章 进一步 讨论 语义 的 概念 ， 涉 及 微 数据 ( microdata ) 等 标准 。 尽 管 这 一 章 的 内 容 有 点 

偏 理论 , 但 透彻 理解 这 个 概念 可 以 给 Web 开 发 人 员 带 来 巨大 的 回报 : 在 谷歌 等 搜索 引擎 的 
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结果 列表 中 显示 更 全 面 、 更 详尽 的 内 容 。 

口 第 4 章 探 索 HTML5 Web 表 单元 素 的 变化 ， 包 括 文本 框 、 选 择 列表 、 复 选 框 和 其 他 用 来 从 
访客 那里 收集 信息 的 微 件 (widget )。HTML5 为 捕获 数据 输入 错误 提供 了 一 些 辅 助 和 基 
本 工具 。 


第 二 部 分 : 视频 、 图 形 和 特效 


口 第 $ 章 讲 一 讲 HTML 最 激动 人 心 的 功能 ， 即 支持 音频 和 视频 播放 。 这 一 章 将 介绍 如 何 避 免 
遭遇 “Web 视 频 编 解码 器 大 战 ”， 创 建 出 在 所 有 浏 览 需 中 都 能 工作 的 播放 页 面 ， 同 时 还 要 
学 习 创 建 自己 定制 的 播放 器 。 

口 第 6 章 介绍 最 新 版 本 的 CSS3 标 准 ， 它 与 HTMLS 可 谓 绝 配 。 我 们 将 学 习 如 何 应 用 新 奇 的 字 

体 让 文本 变 得 活泼 可 爱 ， 以 及 如 何 利 用 变换 和 动画 添加 吸引 人 的 效果 。 

口 第 7 章 探索 CSS3 媒 体 查 询 。 我 们 会 介绍 怎么 使 用 它 创建 响应 式 设计 , 让 网 页 平滑 地 适 配 各 

种 移动 设备 。 

口 第 8 章 将 介绍 名 为 画布 (canvas ) 的 二 维 绘图 表面 。 你 将 会 学 习 怎 样 在 画布 上 绘制 图 形 、 

图 像 、 文 本 ， 甚 至 还 将 构建 一 个 简单 的 绘图 程序 ( 使 用 JavaScript )。 

口 第 9 章 进一步 提升 你 的 “绘画 ”技术 。 这 一 章 将 会 学 习 投影 、 花 哨 的 模式 ， 以 及 可 点 击 的 
交互 图 形 和 动画 等 更 加 令 人 神往 的 Canvas 技 术 。 


第 三 部 分 : 构建 Web 应 用 


口 第 10 章 讨论 在 访客 计算 机 中 保存 小 段 数 据 的 Web 存 储 功 能 。 这 一 章 还 将 介绍 如 何在 网 页 而 

不 是 在 Web 服 务 器 中 使 用 JavaScript 代 码 人 处理 用 户 选 择 的 文件 。 

口 第 11 章 探索 HTML5S 的 缓存 功能 ， 这 个 功能 可 以 实现 在 断 网 的 情况 下 仍然 能 够 通过 浏览 器 

查看 网 页 。 

口 第 12 章 将 把 目光 投向 与 Web 服 务 器 通信 这 个 主题 上 。 为 此 , 将 介绍 久负盛名 的 XMLHttpRequest 
对 象 ，JavaScript 通 过 它 可 以 联系 Web 服 务 器 并 请 求 信息 。 然 后 再 讨论 两 个 比较 新 的 功能 : 
服务 器 发 送 事件 ( Server-Sent Events ) 和 Web Socket。 

口 第 13 章 介绍 了 解决 现代 Web 应 用 开发 难题 的 三 个 新 功能 。 第 一 是 可 以 确定 访客 位 置 的 地 理 

定位 ; 第 二 是 在 后 台 执 行 复杂 任务 的 Web Worker; 第 三 是 能 够 同步 网 页 URL 到 当前 状态 

的 浏览 器 历史 功能 。 

最 后 有 两 个 附录 , 可 以 为 你 掌握 HTML5 补 习 一 些 基 础 知识 。 附录 A 是 对 CSS 的 一 个 简要 介绍 ， 
附录 B 则 会 简单 地 介绍 JavaScript。 


在 线 资 源 


作为 Missing Manual 从 书 的 读者 ， 你 所 得 到 的 不 仅仅 是 一 本 书 。 在 网 上 ， 你 还 可 以 找到 示例 
文件 以 及 技巧 、 文 章 ， 甚 至 是 一 两 段 视频 。 你 可 以 跟 Missing Manual 团 队 交 流 ， 告 诉 我 们 你 喜欢 
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(或 讨厌 ) 本 书 的 哪 一 方面 。 请 访问 www.missingmanuals.com， 或 直接 阅读 后 面 的 某 一 小 节 。 
Missing CD 


本 书 没有 附带 光盘 ,但 这 对 学 习 本 书 一 点 影响 都 没有 。 读 者 可 以 访问 本 书 的 Missing CD 页 面 
http://missingmanuals.com/cds/html5tmm2e, 下 载 本 书 讨论 和 展示 的 网 页 示例 ， 这 样 你 就 不 必 自 己 
动手 敲 那些 长 长 的 网 页 地 址 了 。 这 个 页 面 中 列 出 了 全 书 每 一 章 提 到 的 网 站 的 链接 。 





提示 假如 你 想 找 某 个 特定 的 例子 ,我 教 给 你 一 个 好 办 法 一 一 看 插图 。 在 插图 中 ,文件 名 一 般 
都 会 出 现在 浏览 器 地 址 栏 的 末尾 。 上 比如， 看 到 文件 路 径 C:\HTML5\Chapter01\SuperSimple 
HTMIL5.html ( 图 1-1 )， 就 知道 对 应 的 示例 文件 名 叫 SuperSimpleHTML5.html。 


试验 站 点 


还 有 男 一 种 使 用 本 书 示例 的 方法 ,就 是 访问 在 线 示例 网 站 : www.prosetech.com/html5。 在 这 
个 网 站 上 可 以 看 到 本 书 的 每 一 个 示例 ， 并 直接 在 浏览 器 中 运行 它们 。 因 为 HTML5 的 某 些 功能 需 
要 一 个 真正 的 Web 服 务 器 ， 所 以 直接 使 用 这 个 网 站 其 实 可 以 省 点 心 。( 如 果 你 直接 从 计算 机 硬盘 
上 运行 网 页 ， 这 些 功能 可 能 会 导致 一 些 怪异 的 现象 ， 或 者 完全 不 能 用 。) 而 使 用 这 个 网 站 ， 就 可 
以 先 看 到 某 个 例子 的 运行 结果 ， 然 后 再 下 载 该 页 面 并 动手 尝试 。 

















注意 别 担心 自己 不 知道 哪些 HTML5S 功 能 需要 Web 服 务 器 ， 到 时 候 本 书 会 给 出 提示 的 。 


注册 

如 果 你 在 oreilly.com 注 册 了 这 本 书 ， 可 能 会 享受 到 一 些 优惠 ， 比 如 购买 HTML5: The Missing 
Manual 的 新 版 时 可 以 打 个 折 。 注 册 其 实 只 需 点 几 次 鼠标 。 在 浏览 器 地 址 栏 里 输入 http://tinyurl. 
com/registerbook， 直 接 就 可 以 跳 到 注册 ( Registration ) 页 面 。 
反馈 

有 问题 要 问 ? 需要 更 多 信息 ? 想 给 我 们 写 个 书评 ? 在 反馈 (Feedback ) 页 面 上 ,你 可 以 向 专 
家 请 教 自 己 看 书 时 碰 到 的 问题 ， 也 可 以 分 享 自己 对 Missing Manual 从 书 的 看 法 ， 甚 至 找到 一 些 志 
同道 合 的 朋友 ， 听 听 他 们 谈论 在 做 网 站 过 程 中 的 一 些 体会 。 

要 想 发 言 ， 可 访问 www.missingmanuals.com/feedback。 
勘误 

为 了 尽 可 能 保证 本 书 切合 实际 、 准 确 无 误 , 每 次 重印 我 们 都 会 纠正 一 些 确 认 的 勘误 。 这些 勘 
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误 信 息 也 会 在 本 书 网 站 上 发 布 出 来 ， 以 便 读 者 更 正 自己 手 里 这 本 书 的 错误 。 要 提交 或 查看 勘误 ， 
请 访问 http:/tinyurl.com/html152e-mm "。 
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Safari”Books Online 是 一 个 按 需 阅读 的 数字 图 书馆 ， 有 7500 种 技术 图 
Sa fa 上 于。 书 和 视频 可 供 搜索 。 
0 人 On ne 通过 订阅 ， 可 以 在 此 阅读 所 有 图 书 ， 观 看 任何 视频 。 甚 至 可 以 在 新 
书 印刷 之 前 阅读 到 它们 。 可 以 复制 粘贴 示例 代码 ， 收 藏 喜欢 的 内 容 ， 下 载 整 章 内 容 ， 为 关键 部 分 
创建 书签 ， 添 加 评注 ， 打 印 页 面 ， 以 及 享受 其 他 众多 省 时 省 力 的 阅读 体验 。 
O’Reilly Media 已 经 将 本 书 上 传 到 Safari Books Online。 访 问 http://my.safaribooksonline.com 并 
免费 注册 ， 可 以 看 到 本 书 及 OReilly 和 其 他 出 版 社 图 书 的 完整 电子 版 。 














中 要 提交 中 文 版 勘误 ， 请 访问 图 灵 社 区 ， 并 在 本 书页 面 下 提交 : http://ituring.cn/book/1361。 一 一 编者 注 
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HTML5 简 介 





如 果 说 HTML 是 一 部 电影 , 那 HIML5 就 是 一 次 大 转折 。HTML 本 来 是 不 会 活 过 21 世 纪 的 。 
官方 Web 标 准 组 织 W3C 早 在 1998 年 就 已 经 对 HTML 撒手 不 管 了 。W3C 把 未 来 都 寄托 在 
XHTML 这 个 更 具 现 代 特 色 的 后 续 标 准 身 上 ，XHTML 被 视 为 HTML 的 严肃 整洁 版 。 但 XHTML 举 
步 维 艰 ， 是 一 群 被 剥夺 了 话语 权 的 人 ， 让 HTML 起 死 回 生 并 为 本 书 将 要 探讨 的 功能 商定 了 基础 。 
在 本 章 里 , 你 会 了 解 HTML 死 亡 的 原因 , 以 及 它 又 是 怎样 复活 的 ; 了 解 HTML5 的 设计 原理 与 
功能 ; 还 将 见识 恼人 的 浏览 器 支持 问题 。 在 这 一 章 ， 你 将 第 一 次 看 到 真正 的 HTML5 文 档 。 


1.1 HTMLS5 的 故事 


HTML 的 基本 思想 一 一 使 用 元 素 为 内 容 添 加 结构 一 一 从 Web 诞 生 以 来 就 没有 变 过 。 事 实 上 ， 
即使 是 最 陈旧 的 网 页 ， 在 最 新 的 浏览 器 中 仍然 可 以 得 到 完美 的 呈现 。 

年 长 和 成 功 也 会 带 来 风险 , 那 就 是 所 有 人 都 想 取代 你 ! 1998 年 , W3C 停 止 了 对 HTML 的 维护 ， 
作为 对 它 的 改进 ， 开 始 制 定 一 个 基于 XML 的 后 续 版 本 一 一 XHTML 1.0。 


1.1.1 XHTML 1.0: 更 严格 的 标准 


XHTML 与 HTIML 的 语法 绝 大 部 分 都 是 相同 的 ， 只 不 过 要 求 更 严格 。 很 多 以 前 不 够 严谨 的 
HTML 标 记 , 在 XHTML 中 都 变 成 了 不 能 接受 的 。 

例如 ， 假 设 你 想 把 标题 中 的 最 后 一 个 词 标记 为 斜体 ， 本 来 应 该 写 : 

<h1>The Life of a «<i>Duck</i></h1> 

但 你 一 不 小 心 放 错 了 最 后 两 个 标签 的 位 置 : 

<h1>The Life of a «i>Duck</h1></i> 

浏览 器 在 遇 到 这 个 稍微 有 点 乱 的 标记 之 后 ,能 明 白 你 想 干 什么 。 于 是 ， 它 就 一 声 不 咏 地 把 最 
后 一 个 词 变 成 斜体 。 可 是 ， 标 签 不 匹配 违反 了 XHTML 的 规定 。 如 果 把 页 面 复制 到 一 个 XHTML 
验证 器 中 (或 使 用 Dreamweaver 之 类 的 网 页 设计 工具 时 ), 你 就 会 看 到 一 个 警告 ,告诉 你 哪里 有 错 
误 。 从 Web 设 计 的 角度 看 ，XHTML 基 于 严格 规则 的 这 种 提示 很 有 用 ， 因 为 你 可 以 发 现 微小 的 错 
误 , 这 些 错误 会 导致 在 不 同 浏 览 器 中 显示 结果 不 一 致 ( 这 些 错误 在 编辑 和 增强 页 面 时 还 可 能 导致 
更 严重 的 问题 )。 
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最 初 ，XHTML 获 得 了 成 功 。 由 于 厌倦 了 浏览 需 的 古怪 行为 和 怎么 写 都 可 以 通过 的 不 正常 状 
态 ， 专业 的 Web 开 发 人 员 对 XHTML 还 是 非常 拥护 的 。 后来, XHTML 标准 又 强迫 他 们 养 成 更 好 的 
习惯 ， 同 时 放弃 HTML 中 那些 并 不 完善 的 格式 化 功能 。 可 是 ,与 XML 工具 协同 ， 降 低 自动 化 程序 
处 理 页 面 的 难度 , 方便 地 移植 到 移动 平台 , 以 及 XHTML 语言 自身 的 可 扩展 性 等 这 些 预期 的 好 处 ， 
从 来 没有 在 XHTML 身上 实现 过 。 

即便 如 此 ，XHTMEL 仍 然 成 为 最 严肃 的 Web 设 计 师 所 遵循 的 标准 。 尽 管 看 起 来 所 有 人 都 挺 满 
意 的， 但 实际 上 却 存 在 一 个 潜 规 则 : 浏览 器 虽然 理解 XHTML 标记 ， 但 却 不 会 严格 地 按照 标准 执 
行 错误 检查 。 这 就 意味 着 页 面 仍然 可 以 不 遵守 XHTML 规则 ， 浏 览 器 则 视而不见 。 事 实 上 ， 没 有 
什么 可 以 阻止 Web 开 发 人 员 把 乱糟糟 的 标记 和 陈旧 的 HTML 内 容 混 在 一 起 ， 然 后 还 说 这 是 
XHTML 页 面 。 世界 上 根本 就 没有 一 个 浏览 器 站 出 来 反对 这 种 行为 。 这 种 情况 让 那些 负责 XHTML 
标准 的 人 深 感 不 安 。 



































1.1.2 XHTML 2: 意 想 不 到 的 失败 


解决 方案 就 是 通过 XHTML 2 来 扭转 这 个 乱糟糟 的 局 面 。 这 个 新 版 本 规定 了 严格 的 错误 处 理 
规则 , 强制 要 求 浏 览 器 拒绝 无 效 的 XHTML 2 页 面 , 同时 也 握 弃 了 很 多 从 HTML 沿 秦 下 来 的 怪异 行 
为 和 编码 惯例 。 比 如 ， 以 编号 方式 (<h1>、<h2>、<h3> 等 ) 区 分 标题 的 方法 被 一 个 新 的 <h> 元 素 取 
代 ， 这 个 元 素 的 重要 性 取决 于 它 在 网 页 中 的 位 置 。 类 似 地 ， 由 于 人 允许 Web 开 发 人 员 将 任何 元 素 转 
换 为 链接 ，<ay> 元 素 的 地 位 一 落 千 丈 。 而 <img> 元 素 因 为 增加 了 一 种 提供 替代 内 容 的 新 方式 ， 也 均 
失 了 原 有 的 alt 属 性 。 

这 些 变化 是 XHTML 2 的 典型 特征 。 从 理论 上 看 ， 这 些 改变 的 目的 是 让 网 页 更 整洁 也 更 有 逻 
辑 性 。 而 从 实践 角度 说 ， 这 就 要 求 Web 设 计 人 员 必 须 改 变 以 前 编写 网 页 的 方式 (已 经 存在 的 网 
页 必须 更 新 )， 但 付出 这 些 代 价 却 没有 增加 任何 新 功能 ， 让 这 种 改变 失去 了 价值 。 与 此 同时 ， 
XHTML 2 还 宣布 作废 了 几 个 众所周知 的 元 素 ， 比 如 用 于 加 粗 文 本 的 <b> 、 用 于 变 斜 体 的 <i> 和 用 
于 在 网 页 中 髓 入 另 一 个 网 页 的 ciframe>， 但 这 些 元 素 在 Web 设 计 人 员 中 仍然 深 得 人 心 。 

但 最 糟糕 的 ， 还 是 慢 得 要 死 的 制定 过 程 。XHTML 2 的 制定 过 程 整整 拖 了 5 年 才 完 成 ， 开 发 人 
员 的 激情 早已 荡然 无 存 了 。 


































































































1.1.3 HTML5: 起 死 回 生 


几乎 与 此 同时 ， 从 2004 年 开始 就 有 一 群 人 从 另外 一 个 角度 展望 Web 的 未 来 。 他 们 想 的 不 是 从 
HTML 中 挑 出 各 式 各 样 的 毛病 (或 者 干脆 说 是 主张 “不 纯粹 的 哲学 观 ”)， 而 是 它 还 缺少 什么 Web 
开发 人 员 编 码 时 急需 的 功能 。 

归根 结 底 , HTML 最 早 是 作为 显示 文档 的 手段 出 现 的 。 辅 之 以 JavaScript, 它 其 实 已 经 演变 成 了 
一 个 系统 ， 可 以 开发 搜索 引擎 、 网 上 商店 、 在 线 地 图 、 邮 件 客户 端 以 及 其 他 各 种 能 够 想象 得 到 的 
Web 应 用 。 昌 然 设 计 巧 妙 的 Web 应 用 可 以 实现 很 多 令 人 赞叹 的 功能 ， 但 开发 这 样 的 应 用 远 非 易 事 。 
多 数 Web 应 用 都 得 手动 编写 大 量 JavaScript 代 码 , 还 要 用 到 一 个 或 多 个 流行 的 JavaScript 工 具 包 ， 乃 至 
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在 Web 服 务 器 上 运行 的 服务 器 端 模块 。 要 让 所 有 这 些 方面 在 不 同 的 浏览 器 中 都 能 紧密 配合 不 出 差错 
是 一 个 挑战 。 即 使 是 赢得 了 挑战 ， 你 还 要 记 住 把 这 些 方面 联系 到 一 起 的 那些 错综复杂 的 细节 。 

开发 浏览 需 的 人 对 这 种 情况 特别 关注 。 于 是 , 来 自 Opera Software ( 开发 Opera 浏 览 器 的 公司 ) 
和 Mozilla Foundation ( 开发 Firefox 浏 览 器 的 组 织 ) 的 一 些 具 有 超前 意识 的 人 纷纷 建言 ， 希 望 
XHTML 能 加 入 一 些 对 开发 人 员 更 有 用 的 功能 。 但 他 们 的 建议 并 没有 被 采纳 , 结果 Opera、Mozilla 
和 苹果 公司 自发 地 组 建 了 WHATWG ( Web Hypertext Application Technology Working Group ，Web 
超 文本 应 用 技术 工作 组 )， 致 力 于 寻找 新 的 解决 方案 。 

WHATWG 的 目的 不 是 抛弃 HTML ， 而 是 考虑 以 无 障碍 、 回 后 兼容 的 方式 去 扩展 它 。 这 个 组 
织 最 早 的 工作 成 果 包 含 两 个 补充 规范 : Web Application 1.0 和 Web Forms 2.0。 而 HTML5 正 是 在 这 
两 个 标准 的 基础 上 发 展 起 来 的 。 






































注意 HTML5 中 的 数字 5 表示 这 个 标准 是 HTML 的 后 续 版 本 (在 XHTMIL 之 前 ，HTML 的 版 本 号 
是 4.01 )。 当 然 ， 这 个 解释 也 不 完全 正确 ， 因 为 HTML5 支 持 自 HTML 4.01 发 布 以 来 的 10 年 
间 出 现在 网 页 中 的 所 有 新 东西 ， 包 括 严格 的 XHTML 风格 的 语法 ( 只 要 你 愿意 就 可 以 用 ) 
和 大 量 的 JavaScript 创 新 。 但 不 管 怎么 说 ， 这 个 名 字 仍 然 清 楚 地 表明 : HTMLS 虽 然 支持 
XHTML 的 规定 ， 但 它 要 求 的 则 是 HTML 的 规则 。 


2007 年 ，WHATWG 获 得 了 全 球 Web 开 发 人 员 空 前 的 支持 。 痛 定 思 痛 之 后 ，W3C 宣 布 解散 负 
责 制定 XHTML 2 标准 的 工作 组 ， 并 开始 致力 于 将 HTML5 改 造 为 正式 的 标准 。 就 这 样 ， 最 初 的 
HTML5 被 分 制 成 多 个 容易 管理 的 模块 ， 而 本 来 统称 为 HTML5 的 很 多 功能 分 散 到 了 几 个 独立 的 标 
准 中 (更 多 信息 ,请 详 见 后 面 的 附注 栏 )。 











提示 W3C 官 方 HTML5 标 准 的 网 址 是 www.w3.org/TR/html5。 


HTML5 包 含 哪些 功能 
HTMLS 包 含 多 个 标准 ， 这 些 标 准 之 间 彼 此 关联 。 这 种 局 面 既 好 又 不 好 。 说 好 ， 是 因为 济 
览 器 可 以 迅速 实现 HTML5 中 业已 成 熟 的 部 分 ， 而 任 由 其 他 部 分 继续 发 展 。 说 不 好 ， 则 是 因为 
编写 网 页 的 人 必须 检查 浏览 器 是 否 支 持 自己 想 用 的 功能 。 本 书 将 会 介绍 一 些 检测 浏览 器 的 技 
术 ， 有 的 很 麻烦 ， 有 的 则 没有 那么 麻烦 。 
以 下 列 出 了 HTMIL5 涵 盖 的 一 些 主要 功能 。 
口 HTMLS 核 心 。 这 一 部 分 主要 由 W3C 官 方 的 规范 组 成 ， 涉 及 新 的 语义 元 素 ( 第 2 章 和 第 3 
章 )、 新 的 增强 的 Web 表 单 微 件 (第 4 章 )、 音 频 和 视频 支持 (第 5 章 ) 以 及 通过 JavaScript 
绘图 的 Canvas ( 第 8 章 和 第 9 章 )。 
口 曾 经 属于 HTMILS 的 功能 。 这 一 部 分 源 自 WHATWG 最 初 制定 的 HTML5 规 范 ， 其 中 大 多 
数 功能 需要 JavaScript 且 支持 富 Web 应 用 开发 。 最 重要 的 包括 本 地 数据 存储 ( 第 10 章 )、 
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离线 应 用 (第 11 章 ) 和 消息 传递 (第 12 章 )， 但 本 书 要 介绍 的 内 容 还 不 止 这 些 。 

口 有 时 候 会 被 称 为 HTMLS 的 功能 。 这 些 通常 是 指 下 一 代 功 能 ， 虽 然 它们 从 未 进入 过 

HTML5 标 准 ， 但 人 们 还 是 经 常会 把 它们 与 HTML5 相 提 并 论 。 这 部 分 包括 CSS3 ( 第 6 章 

和 第 7 章 ) 和 地 理 定位 (第 13 章 )。 

甚至 连 W3C 都 在 有 意 无 意 地 模糊 “真正 的 ”HTML5 (已 有 标准 ) 和 “宣传 用 ”版 本 ( 包 
括 HTML5 的 所 有 新 增 部 分 和 补充 规范 ) 之 间 的 界限 。 举 个 合子， 官方 W3C 标 志 网 站 
(www.w3.org/html/logo ) 鼓励 人 们 生成 用 于 宣传 CSS3 和 SVG 的 HTML5 标 志 ， 而 前 两 个 标准 在 
HTML5 出 现 之 前 就 已 经 在 开发 了 。 


1.1.4 HTML: 活着 的 语言 


从 W3C 到 WHATWG， 然后 再 回 到 W3C， 这 个 过 程 导 致 了 相当 罕见 的 转换 与 磨合 。 从 技术 上 
说 ,什么 是 或 什么 不 是 HTML5 由 W3C 说 了 算 。 但 与 此 同时 , WHATWG 一 直 在 设计 未 来 的 HTML 
功能 。 直到 最 近 , 他 们 才 不 再 把 自己 的 工作 成 果 称 为 HTML5, 而 是 简单 地 称 为 HTML, 表明 HTML 
还 会 继续 活 下 去 。 

因为 HTML 是 一 门 活着 的 语言 ， 所 以 HTML 页 面 永远 不 会 作废 ， 也 不 会 无 法 阅读 。HTML 页 
面 永远 不 需要 版 本 号 ( 甚至 连 文档 类 型 声明 都 不 需要 )，Web 开 发 人 员 也 永远 不 需要 为 了 让 它 能 
在 新 浏览 需 中 运行 , 而 把 自己 的 标记 从 一 个 版 本 “升级 ”到 另 一 个 版 本 。 同样 , 任何 时 候 在 HTML 
标准 中 都 可 能 增添 新 功能 。 

Web 开 发 人 员 上 听 到 这 么 说 ， 第 一 反应 通常 是 大 惑 不 解 。 毕 竟 ， 谁 希望 浏览 器 对 标准 的 支持 各 
不 相同 ,而 谁 又 愿意 在 选择 功能 时 只 赁 它们 将 来 会 得 到 支持 这 个 可 能 性 呢 ? 然而 , 冷静 下 来 想 一 
想 ， 大 多 数 Web 开 发 人 员 还 是 不 情愿 地 接受 了 这 个 现实 : 无 论 如 何 ， 浏 览 器 从 Web 诞 生 的 那 一 天 
起 始终 都 是 这 样 的 。 

前 面 我 们 解释 过 , 今天 的 浏览 器 乐于 接受 支持 一 大 堆 乱 七 八 糟 的 功能 这 个 现实 。 你 可 以 在 激 
进 的 XHTML 页 面 中 加 上 像 cmarquee> 元 素 ( 用 于 创建 滚动 文本 ， 已 废弃 ) 这 样 被 认为 是 倒 行 逆 施 
的 东西 ,任何 浏览 器 都 不 会 反对 。 类 似 地 ， 即 便 是 在 对 最 老 标 准 的 支持 方面 ， 有 些 浏 览 器 也 仍然 
存在 一 些 广 为 人 知 的 遗漏 。 比 如 ， 有 些 浏览 器 开发 商 在 完整 地 支持 CSS2 之 前 就 开始 实现 CSS3 ， 
结果 很 多 CSS2 特 性 后 来 都 没有 实现 。 唯 一 的 区 别 就 是 HTML5 现 在 把 “活着 的 语言 ” 变 成 了 常规 
状态 。 同 样 ， 就 像 我 们 正在 用 新 的 、 创 新 性 的 一 章 来 介绍 HTML 一 样 ， 它 经 过 了 一 番 轮 回 终 于 又 
恢复 了 它 的 本 来 面貌 ， 这 不 也 正 是 一 个 天 大 的 讽刺 吗 ? 






































































































































提示 要 了 解 当 下 正在 发 展 中 的 HTML， 和 包括 被 称 为 HTML5 的 部 分 和 少量 但 始终 在 变化 的 、 新 
的 、 还 没有 得 到 支持 的 功能 ， 请 访问 http://whatwg.org/html。 
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1.2 HTML5 的 三 个 主要 原理 


此 时 此 刻 ， 有 的 读者 可 能 已 经 按 撩 不 住 了 ， 迫 不 急 待 地 想 知道 真正 的 HTML5S 页 面 到 底 是 什 
么 样子 的 。 不 过 在 此 之 前 ， 有 必要 先 了 解 一 下 制定 HTML5 规 范 的 那些 人 当时 是 怎么 想 的 。 只 有 
理解 了 这 门 语言 背后 的 设计 思想 , 才能 真正 明白 本 书 将 要 介绍 的 那些 古怪 的 行为 、 复 杂 的 现象 和 
偶尔 会 让 人 抓 耳 挠 腮 的 问题 。 


























1.2.1 不 破坏 Web 


“不 破坏 Web” 的 意思 是 标准 不 应 该 引入 导致 已 有 的 网 页 无 法 工作 的 改变 。 幸 运 的 是 ， 这 种 
事故 极 少 发 生 。 

“不 破坏 Web” 还 意味 着 标准 不 应 该 出 人 意料 地 更 改 规则 ， 不 能 认定 今天 还 完美 无 缺 的 网 页 
到 了 明天 就 要 作废 ( 即使 可 以 使 用 也 要 作废 )。 比 如 ，XHTML 2 破坏 了 Web， 因 为 它 要 求 马上 就 
显著 改变 以 前 编写 网 页 的 方式 。 没 错 , 原来 的 网 页 还 能 用 , 但 那 都 是 浏览 器 支持 向 后 兼容 的 功劳 。 
如 果 你 为 将 来 打算 ， 想 按照 最 新 标准 重 写 网 页 ， 就 得 浪费 数 不 清 的 时 间 去 纠正 XHTML 2 已 经 明 
邻 禁止 的 “错误 ”。 

HTMLS 的 立场 不 一 样 。HTML5 之 前 可 以 接受 的 , 在 HTML5 中 照样 可 以 接受 。 事实 也 是 , 符 
合 HTML 4.01 标 准 的 网 页 在 HTML5 中 仍然 是 有 效 的 。 
























































注意 与 以 往 的 标准 不 同 ，HTMIL5 不 仅 向 浏览 器 开发 商 明 示 该 支持 什么 ,还 利用 文档 说 明 并 规 
范 化 了 它们 原来 的 处 理 方式 。 由 于 HTML5 标 准 描述 的 都 是 事实 ， 而 不 是 抛 出 一 堆 理想 的 
规则 了 事 ， 因 此 它 有 望 成 为 有 史 以 来 受 支 持 程度 最 高 的 Web 标 准 。 


HTML5 怎 么 处 理 废弃 元 素 

因为 HTML5 支 持 所 有 HTML,，, 所 以 它 支持 很 多 被 认为 是 废弃 的 功能 。 其 中 包括 像 <font> 
这 样 的 格式 化 元 素 ， 被 人 厌恶 的 <blink> 和 <marquee> 等 特效 元 素 ， 以 及 难 对 付 的 HTML 框 架 

这 种 无 所 不 包 的 开放 性 是 令 很 多 HTML5 新 手感 到 困 瓯 的 一 个 原因 。 一 方面 ，HTMIL5 无 论 
如 何 还 是 应 该 禁止 使 用 这 些 过 时 的 元 素 , 因为 它们 已 经 很 多 年 没有 出 现在 官方 规范 里 了 。 另 一 
方面 ， 现 代 浏览 器 依然 悄 无 声息 地 支持 着 这 些 元 素 ， 而 HTML5 就 是 要 体现 浏览 器 真实 的 处 理 
方式 。 那 么 这 个 标准 到 底 要 怎么 做 呢 ? 

为 解决 这 个 问题 ，HTML5 规 范 包 含 两 个 独立 的 部 分 。 第 一 部 分 ( 也 是 本 书 将 要 介绍 的 ) 
面向 Web 开 发 人 员 ， 要 求 握 弃 过 去 的 那些 坏 习惯 和 被 废弃 的 元 素 。 通 过 使 用 HTML5 验 证 器 可 
以 确保 遵循 HTML5 标 准 的 这 一 部 分 。 

第 二 部 分 ， 也 是 HTML5 规 范 中 篇 幅 更 长 的 部 分 ， 针 对 的 是 浏览 器 开发 商 。 它 们 需要 支持 
HTML 中 存在 的 一 切 ， 以 做 到 向 后 兼容 。 理 想 情 况 下 ，HTMIL5 标 准 中 应 该 包含 足够 的 信息 ， 





6 | 第 1 章 HTML5 简介 


让 人 能 够 据 以 从 头 开发 一 个 新 浏览 器 , 而 且 无 论 是 处 理 新 的 还 是 旧 的 标记 , 该 浏览 器 都 应 该 能 
够 与 今天 的 现代 浏览 器 完全 兼容 。 这 一 部 分 标准 就 是 告诉 浏览 器 如 何 处 理 那些 官方 不 鼓励 使 用 
但 仍然 必须 支持 的 废弃 元 素 。 

有 时 候 ，HTML5 规 范 也 会 对 浏览 器 应 如 何 处 理 各 种 错误 ( 如 漏 写 或 错 配 了 标签 ) 作出 正 
式 规定 。 这 一 点 其 实 很 重要 , 因为 它 可 以 确保 有 缺陷 的 页 面 在 不 同 浏览 器 中 都 能 够 得 到 同样 的 
处 理 ， 其 至 都 规定 了 将 页 面 映射 为 DOM ( Document Object Model， 文 档 对 象 模 型 ， 即 内 存 中 
表现 页 面 元 素 的 对 象 树 ， 供 JavaScript 使 用 ) 这 么 细节 的 问题 。 为 了 写 出 标准 的 这 个 兄长 又 乏 
味 的 部 分 ，HTML5 的 制定 者 们 在 现代 浏览 器 上 进行 了 彻底 的 测试 ， 以 便 发 现 还 没有 作出 规定 
的 错误 处 理 行为 。 然 后 再 把 该 行为 加 到 标准 中 。 


1.2.2 ”修补 牛 蹄 子路 


牛 蹄 子路 〈cowpath ) 指 的 是 高 低 不 平 但 使 用 频率 很 高 的 路 ， 通 过 它 可 以 从 一 个 地 方 到 达 另 
一 个 地 方 。 之 所 以 存在 牛 蹄 子路 ,就 是 因为 有 人 走 。 也 许 这 条 路 走 起 来 不 是 最 舒服 的 , 但 某 种 程 
度 上 却 是 最 实际 的 解决 之 道 。 

HTMLS 标 准 化 了 这 些 非 官 方 (但 广泛 应 用 ) 的 技术 。 或 许 与 利用 新 方法 修 的 高 速 公路 相 比 ， 
牛 蹄 子路 没有 那么 平坦 宽阔 , 但 它 遍 得 胜利 的 机 会 更 大 。 因 为 对 于 一 般 的 网 站 设计 人 员 来 说 ， 切 
换 到 新 技术 可 能 会 超出 他 们 的 能 力 范 围 , 或 者 他 们 根本 就 没有 兴趣 。 更 大 的 问题 在 于 , 使 用 旧 浏 
览 器 的 访客 无 法 因为 新 技术 而 受益 。XHTML 2 企图 把 人 们 赶 出 牛 足 子路， 结果 败 得 非常 惨 。 


























注意 修补 牛 蹄 子路 有 一 个 明显 的 好 处 : 它 使 用 已 经 得 到 浏览 器 某 种 程度 支持 的 既定 技术 。 假 
设 有 一 种 只 被 七 成 浏览 器 支持 的 漂亮 的 新 技术 ， 还 有 一 种 任何 情况 都 能 工作 但 不 那么 雅 
观 的 hack，Web 开 发 人 员 始 终 都 会 选择 不 那么 雅 观 的 hack， 因 为 它 适合 更 多 的 用 户 。 


“修补 牛 蹄 子路 ”的 方法 也 需要 折 中 。 有 时 候 ， 这 意味 着 要 包容 那些 得 到 广泛 支持 但 设计 却 
很 拙劣 的 功能 。HTMLS 的 拖 放 就 是 一 个 例子 (参见 10.3.5 节 )， 这 个 功能 完全 以 微软 为 IE5 设 计 的 
拖 放 机 制 为 基础 。 尽管 这 个 拖 放 功 能 目前 得 到 了 所 有 浏览 器 的 支持 , 但 由 于 使 用 起 来 不 灵活 而 且 
过 度 复 杂 , 因此 几乎 没有 人 不 反感 它 。 为 此 , 不 少 的 Web 设 计 人 员 也 抱怨 “HTMLS5 不 仅 鼓励 不 良 
行为 ， 而 且 还 给 它们 正名 。” 











1.2.3 ”实用 至 上 


这 个 原理 很 简单 : 改变 应 该 以 实用 为 目的 。 改 变 得 越 多 ,代价 也 就 越 大 。Web 开 发 人 员 可 能 
更 希望 标准 是 精心 设计 、 始 终 如 一 ， 而 且 是 没有 怪异 行为 的 。 但 这 个 理由 还 不 足以 改变 一 门 已 经 
用 来 创建 了 数 十 亿 网 页 的 语言 。 当 然 , 到 底 需要 不 需要 改变 还 是 要 由 某 个 人 根据 利害 来 评判 。 而 
现 有 网 页 都 是 怎么 做 的 或 者 说 试图 怎么 去 做 ， 可 以 作为 很 好 的 判断 依据 。 
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例如 ，( 在 本 书写 作 时 ) YouTube 是 世界 上 第 三 受 欢 迎 的 网 站 ,但 由 于 HTML5 之 前 的 HTML 
不 真正 支持 视频 ，YouTube 一 直 都 得 依赖 Flash 插 件 。 使 用 Flash 插 件 没什么 问题 ,因为 只 要 是 能 上 
网 的 计算 机 ， 基 本 上 都 会 安装 这 个 插件 。 不 过 也 有 例外 ， 比 如 某 些 公司 会 锁定 它们 的 计算 机 ,不 
允许 安装 Flash， 男 外 一 些 移动 设备 ( 如 iPhone 、iPad 和 Kindle ) 也 不 支持 Flash。 不 管 有 多 少 计算 
机 安装 了 Flash , 扩展 HTML 标 准 , 使 其 直接 支持 人 们 今天 使 用 Web 的 一 种 最 基本 方式 一 一 看 视频 ， 
弓 良 置疑 是 有 必要 的 。 

而 HITML5 中 添加 了 更 多 交互 功能 的 背后 也 有 着 同样 的 动机 。 像 拖 放 、 可 编辑 的 HTML 内容、 
在 Canvas 中 绘制 二 维 图 形 等 ， 都 是 同样 的 情况 。 这 些 功能 在 我 们 身边 的 网 页 中 并 不 鲜 见 ， 只 不 过 
有 的 通过 Adobe Flash 或 微软 Silverlight 等 插件 实现 ， 而 有 的 则 是 利用 JavaScript 库 或 〈 更 艰苦 地 ) 
完全 通过 手工 编写 JavaScript 代 码 来 实现 。 因 此 ,为 什么 不 在 HTML 标 准 中 加 入 官方 的 支持 ,让 这 
些 功 能 在 所 有 浏览 器 中 都 能 一 致 地 工作 呢 ? HTML5 正 是 要 这 人 么 做 。 


















































注意 ”Flash 等 浏览 器 插件 不 会 一 夜 之 间 就 消失 。 尽 管 HTML5 有 很 多 创新 , 但 通过 它 来 构建 复杂 
的 图 形 界 面 应 用 ,仍然 不 是 件 轻而易举 的 事 。 不 过 ，HTML5 的 终极 目标 很 清楚 : 让 网 站 
不 依赖 插件 也 能 够 提供 视频 、 丰 富 的 交互 功能 以 及 各 种 漂亮 的 效果 。 


1.3 HTML5 标记 初 体验 


下 面 是 一 个 最 简单 的 HTML5 文 档 。 


“1!1DOCTYPE html> 
<title>A Tiny HTML Document</title> 
<p>Let's rock the browser, HTML5 style.</p> 


开始 是 HTML5 的 文档 类 型 声明 (下 一 节 会 详细 介绍 ), 然后 是 页 面 标题 和 一 些 内 容 。 在 这 里 ， 
内 容 是 包含 在 一 个 段落 中 的 文本 。 
想必 读者 已 经 知道 它 在 浏览 器 中 是 个 什么 样子 了 ,不 过 为 了 验证 你 的 直觉 ， 可 以 参考 图 1-1。 







































































ER (eho 图 1-1: 只 包含 一 行文 本 的 超 简单 的 HTML5 文 档 
| LATiny HTML Document st 
KS) /chapter Ol/SuperSimpleHTMLS .him! “|C EA LD: 


Let's rock the browser, HTMLS style. 


























其 至 还 可 以 进一步 给 这 个 文档 瘦身 。 比 如 ，HTML5 标 准 不 要 求 必 须 有 最 后 面 那个 </p> 标 签 ， 
因为 浏览 需 知 道 在 文档 后 面 要 关闭 所 有 没有 关闭 的 标签 (HIML5 标 准 规定 浏览 器 必须 这 样 处 
理 )。 可 是 ， 这 种 简单 的 写法 会 让 标记 显得 很 乱 ， 甚 至 可 能 导致 意料 之 外 的 错误 。 
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如 果 有 其 他 方式 提供 标题 信息 ，HTML5 标 准 也 允许 你 省 略 ctitle> 元 素 。 比 如 ， 在 通过 电子 
邮件 发 送 HTML 文 档 时 , 可 以 把 标题 放 在 邮件 的 标题 中 , 而 把 其 他 标记 ( 文档 类 型 声明 以 及 内 容 ) 
放 在 邮件 的 正文 里 。 不 过 ， 这 很 明显 是 一 种 特例 。 

更 常见 的 情况 , 则 是 充实 这 个 已 经 瘦 骨 几 刚 的 HTML5 文 档 。 大 多 数 Web 开 发 人 员 都 认为 使 用 
<head> 和 <body> 来 分 块 可 以 避免 导致 混乱 ， 因 为 可 以 把 关于 页 面 的 信息 〈 头 部 ) 与 页 面 的 实际 内 
容 (主体 ) 分 开 。 在 为 页 面 添加 脚本 、 样 式 表 和 元 数据 的 时 候 ， 这 种 结构 特别 实用 : 


<!DOCTYPE htm]> 
<head> 
<title>A Tiny HTML Document</title> 
</head> 
<body> 
<p>Let's rock the browser, HIML5 style.</p> 
</body> 
当然 ,( 第 3 行 和 第 6 行 ) 代码 中 的 缩 进 不 是 必需 的 。 这 里 使 用 缩 进 就 是 为 了 让 人 一 眼 就 能 
清楚 页 面 结构 。 
最 后 ， 还 可 以 选择 用 <html> 元 素来 封装 整个 文档 ( 不 包含 文档 类 型 声明 那 一 行 )。 结 果 就 成 
了 这 样 : 
<!DOCTYPE htm]> 
<html> 
<head> 
<title>A Tiny HTML Document</title> 
</head> 
<body> 
<p>Let's rock the browser, HIML5 style.</p> 


</body> 
</html> 


在 HTML5 以 前 , 所 有 版 本 的 HTML 官 方 规范 都 要 求 使 用 chtml> 元 素 , 而 实际 上 用 不 用 它 对 浏 
览 器 来 说 是 无 所 谓 的 。HTML5 则 规定 可 用 可 不 用 。 





























注意 使 不 使 用 chtml>、<head> 和 <body3 元 素 只 代表 一 种 风格 。 即 便 是 在 HTML5 诞 生 之 前 就 已 
经 存在 的 浏览 器 中 ， 不 用 这 些 元 素 ， 页 面 照样 可 以 完美 呈现 。 事 实 上 ， 浏 览 器 会 自动 假 
设 页面 中 已 经 包含 了 这 些 元 素 。 因 此 ， 如 果 用 JavaScript 来 查询 DOM ( 表示 页 面 中 元 素 的 
一 组 对 象 ， 可 以 通过 编程 方式 访问 )， 仍 然 能 够 找到 《html>、《<head> 和 <body> 元 素 ， 无 论 
你 实际 上 加 了 还 是 没 加 。 


现在 , 这 个 示例 比 最 简单 的 HTMLS 文 档 复杂 一 些 , 但 比 真正 实用 的 HTMLS 网 页 又 简单 一 些 。 
接 下 来 的 几 节 ， 我 们 会 陆续 向 其 中 加 入 新 内 容 ， 同 时 也 对 标记 进行 简单 介绍 。 


1.3.1 HTML5 文档 类 型 


每 个 HTML5 文 档 的 第 一 行 都 必须 是 一 个 特定 的 文档 类 型 声明 。 这 个 文档 类 型 声明 用 于 宣告 
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后 面 的 文档 标记 遵循 哪个 标准 。 以 下 文档 声明 表示 文档 标记 遵循 HTML5 标 准 : 


<!DOCTYPE html> 


HTML5S 的 文档 类 型 声明 给 人 的 第 一 印象 就 是 极其 简单 。 特 别 是 与 兄长 的 XHTML 1.0 严 格 型 
的 文档 类 型 声明 相 比 ， 这 一 点 更 明显 : 


<!IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 


面 对 如 此 复杂 的 XHTML 文档 类 型 声明 ， 就 连 专 业 的 Web 开 发 人 员 也 不 得 不 采用 复制 粘贴 的 
方法 。 相 比 之 下 ，HTML5 的 文档 类 型 声明 简约 至 上 ， 手工 输入 也 不 麻烦 。 

另外 , HTML5 的 文档 声明 还 有 一 点 值得 注意 , 那 就 是 它 不 包含 官方 规范 的 版 本 号 ( 即 HTML5 
中 的 5 )。 事实 上 , 这 个 声明 仅仅 表明 当前 页 面 是 HTML 页面。 这 与 HTMLS 作 为 一 门 活着 的 语言 ( 见 
1.1.4 节 ) 的 远见 是 分 不 开 的 。 换 名 话说 ， 只 要 有 新 功能 添加 到 HTML 语 言 中 ， 你 在 页 面 中 就 可 以 
使 用 它们 ， 而 不 必 为 此 修改 文档 类 型 声明 。 

由 此 ， 不 少 读者 可 能 都 会 提出 一 个 问题 : 既然 HIML5 是 一 门 活 语 言 ， 那 为 什么 还 要 求 网 页 
中 有 这 个 所 谓 的 文档 类 型 声明 呢 ? 

要 求 保留 文档 类 型 声明 , 主要 是 由 于 历史 原因 。 如 果 没 有 文档 类 型 声明 , 那 大 多 数 浏览 器 ( 包 
括 Internet Explorer 和 Firefox ) 将 转换 到 一 种 混杂 模式 ( quirk mode )'。 在 这 种 模式 下 ， 浏 览 器 会 
尝试 根据 有 点 不 那么 正常 的 规则 呈现 网 页 (那些 规则 是 在 浏览 器 的 老 版 本 中 使 用 的 ), 而 问题 是 ， 
不 同 浏览 器 的 混杂 模式 也 不 一 样 ,因此 为 一 种 浏览 器 设计 的 页 面 到 了 男 一 个 浏览 嚣 中, 不 是 字体 
大 小 不 一 样 ， 就 是 布局 上 有 瑕 辛 ， 或 者 出 现 其 他 不 一 致 的 问题 。 

而 在 添加 了 文档 类 型 声明 后 ,浏览 器 就 知道 你 想 要 使 用 更 严格 的 标准 模式 ( standard mode )， 
在 这 种 模式 下 ,所 有 现代 浏览 器 都 会 以 一 致 的 格式 和 布局 来 显示 网 页 。 浏 览 器 不 关心 你 使 用 的 是 
哪 种 文档 类 型 (个 别 情况 下 还 有 些 例外 )， 只 要 它 检查 到 你 有 某 种 文档 类 型 声明 就 好 。HTML5 的 
文档 类 型 声明 是 最 短 的 有 效 文档 类 型 声明 ， 因 此 它 总 是 能 触发 标准 模式 。 




















































































































提示 HTML5 的 文档 类 型 声明 可 以 触发 所 有 具备 标准 模式 的 浏览 器 的 标准 模式 ， 和 包括 那些 对 
HTML5 一 无 所 知 的 浏览 器 。 为 此 ,从 现在 开始 , 你 可 以 在 任何 网 页 中 都 使 用 HTML5 文 档 
类 型 声明 ， 即 便 使 用 很 少 得 到 支持 的 HIMLS 功 能 也 没 问题 。 


虽然 文档 类 型 声明 主要 的 目的 是 告诉 浏览 器 去 做 什么 , 但 其 他 代理 也 可 以 检测 该 声明 , 比如 ， 
HIML5 验 证 器 、 搜 索引 擎 、 设 计 工 具 , 还 有 人 一 一 在 想 知道 你 当初 在 页 面 中 想 写 什么 样 的 标记 时 。 











注 1: IE5.5 引 入 了 文档 模式 〈 document mode ) 的 概念 ， 这 个 概念 是 通过 切换 文档 类 型 声明 实现 的 。 最 初 的 两 种 文档 
模式 是 : 混杂 模式 和 标准 模式 。 混 杂 模 式 会 让 正 的 行为 与 (包含 非 标准 特性 的 ) IE5 相 同 ， 而 标准 模式 则 让 了 正 
的 行为 更 接近 标准 行为 。 虽 然 这 两 种 模式 主要 影响 CSS 内 容 的 呈现 , 但 在 某 些 情 况 下 也 会 影响 到 JavaScript 的 解 
释 执行 。 摘 自 《JavaScript 高 级 程序 设计 (第 3 版 )》P16 ~ P17，[ 美 J]Nicholas C. Zakas 著 ， 李 松 峰 、 曹 力 译 ， 人 
民 邮 电 出 版 社 2012 年 版 。( 译 者 注 ) 
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1.3.2 ”字符 编码 


字符 编码 是 一 种 标准 , 计算 机 根据 它 把 文本 转换 成 保存 在 文档 中 的 字 节 序列 ( 或 者 在 打开 文 
件 时 再 将 字 节 序列 转换 成 文本 形式 )。 由 于 历史 原因 ， 现 有 的 编码 标准 有 很 多 种 。 但 实际 上 ， 所 
有 英文 网 站 今天 都 在 使 用 一 种 叫 UTF-8 的 编码 ， 这 种 编码 简洁 、 转 换 速 度 快 ， 而 且 支 持 任 何 你 想 
要 的 非 英 文字 符 。 
一 般 来 说 ， 经 过 配置 的 Web 服 务 需 会 告诉 浏览 器 它 提 供 的 网 页 采用 了 什么 编码 。 但 除非 是 你 
自己 配置 的 Web 服 务 器 ， 否 则 这 一 步 始终 是 不 确定 的 。 由 于 浏览 器 在 猜测 网 页 编码 的 时 候 可 能 会 
引发 一 些 说 不 清 的 安全 问题 ， 因 此 最 好 在 自己 的 标记 中 也 加 上 编码 信息 。 

在 HTML5 文 档 中 添加 字符 编码 信息 也 很 简单 。 只 要 像 下 面 这 样 在 chead> 区 块 的 最 开始 处 ( 如 
果 没 有 添加 <head> 元 素 ， 则 是 紧 跟 在 文档 类 型 声明 之 后 ) 添加 相应 的 cmeta> 元 素 即 可 : 


<head> 

<meta charset="utf-8"> 

<title>A Tiny HTML Document</title> 
</head> 


Dreamweaver 等 设计 工具 在 创建 新 网 页 时 会 自动 添加 这 个 元 信息 ， 它 们 也 会 确保 将 文件 保存 
为 UTF 编 码 格式 。 不 过 ， 如 果 你 使 用 的 是 简单 的 文本 编辑 器 ,， 那 就 还 要 自己 选择 将 文件 保存 为 正 
确 的 格式 。 比 如 ， 使 用 Windows 中 的 记事 本 程序 编写 HTML 页面 后 ， 必 须 在 “保存 为 ”对 话 框 下 
方 的 “编码 ”列表 中 选择 “UTF-8”。 而 在 使 用 Mac OS 中 的 TextEdit 时 ， 首 先 需要 选择 “格式 ”> 
“生成 纯 文 本 ”， 以 确保 程序 将 页 面 保存 为 纯 文 本 ， 然 后 必须 再 从 “保存 为 ”对 话 框 的 “ 纯 文 本 编 
码 ” 弹 出 菜单 中 选择 “Unicode(UTF-8)”。 








































































































1.3.3 ”页 面 语言 


指明 网 页 中 使 用 的 自然 语言 是 一 种 好 习惯 。 这 个 信息 有 时 候 对 其 他 人 有 用 ， 比 如 搜索 引擎 可 
以 通过 它 来 筛选 搜索 结果 ， 确 保 只 向 搜索 者 返回 页 面 语 言 与 他 使 用 的 语言 相同 的 页 面 。 

为 给 内 容 指 定语 言 ， 可 以 在 任何 元 素 上 使 用 lang 属 性 ， 并 为 该 属性 指定 相应 的 语言 代码 ( 比 
如 ，en 表 示 英 语 )。 各 国 的 语言 代码 可 以 在 这 里 查 到 : http://people.w3.org/rishida/utils/subtags/。 

为 整个 页 面 添加 语言 说 明 的 最 简单 方式 ， 就 是 为 chtml> 元 素 指定 lang 属 性 : 

<html lang="en"> 

如 果 页 面 中 包含 多 种 语言 的 文本 , 那么 这 个 细节 信息 对 屏幕 阅读 器 也 是 很 有 用 的 。 在 这 种 情 
况 下 ， 可 以 为 文本 中 的 不 同 区 块 指定 lang 属 性 ， 指 明 该 区 块 中 文本 的 语言 (例如 ， 可 以 给 包含 不 
同 语言 文本 的 <div> 元 素 指 定 不 同 的 lang 属 性 ), 这 样 ,屏幕 阅读 器 就 可 以 选择 朗读 适当 的 文本 了 。 


1.3.4 添加 样式 表 


只 要 是 经 过 特意 设计 的 专业 网 站 ， 就 一 定 会 使 用 样式 表 。 指 定 想 要 使 用 的 CSS 样 式 表 时 ， 需 
要 在 HTML5 文 档 的 chead> 区 块 中 添加 <link> 元 素 ， 例 如 : 
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<head> 

<meta charset="utf-8"> 

<title>A Tiny HTML Document</title> 

<link href="styles.css" rel="stylesheet"> 
</head> 


这 跟 向 传统 的 HTML 文 档 中 添加 样式 表 大 同 小 异 ， 但 稍微 简单 一 点 。 


注意 ”因为 CSS 是 网 页 中 唯一 可 用 的 样式 表 语 言 ， 所 以 网 页 中 过 去 要 求 的 type="text/css" 属 性 
就 没有 什么 必要 了 。 


1.3.5 添加 JavaScript 








JavaScript 最 早 是 为 了 给 网 页 添加 一 些 闪光 点 和 吸引 力 才 出 现 的 ， 不 过 编写 起 来 比较 费时 间 。 
今天 ,JavaScript 的 主要 用 途 不 再 是 装饰 用 户 界 面 ， 而 是 开发 新 奇 的 Web 应 用 , 包括 在 浏览 器 中 运 
行 的 极其 先进 的 电子 邮件 客户 端 、 文 字 处 理 程序 ， 以 及 地 图 引擎 。 

在 HIMLS 页 面 中 添加 JavaScript 与 在 传统 页 面 中 添加 差不多 ， 下 面 就 是 一 个 引用 外 部 
JavaScript 代 码 文件 的 示例 : 


<head> 
<meta charset="utf-8"> 
<title>A Tiny HTML Document</title> 
<script src="scripts.js"></script> 
</head> 


没有 必要 加 上 language="Javascript" 属 性 。 浏览 器 会 假定 你 想 要 使 用 JavaScript, 除非 你 想 使 
用 其 他 脚本 语言 ， 因 为 JavaScript 是 唯一 被 浏览 器 广泛 支持 的 HTML 脚 本 编写 语言 ， 所 以 你 不 会 指 
定 其 他 语言 。 不 过 ， 即 使 是 引用 外 部 JavaScript 文 件 ， 也 不 能 忘 了 后 面 的 </script> 标 签 。 假 如 你 
不 写 这 个 标签 ， 或 者 使 用 空 元 素 语法 想 缩短 标记 ， 页 面 将 不 会 执行 加 载 脚 本 。 

如 果 你 在 Internet Explorer 中 要 花 大 量 时 间 测 试 包含 JavaScript 的 页 面 , 还 应 该 在 chead> 区 块 中 
包含 一 行 特殊 的 注释 ， 叫 做 Web 标 志 ( mark ofthe Web ) '; 这 行 注释 要 放 在 指定 字符 编码 的 元 数 
据 标 签 后 面 ， 如 下 所 示 : 


<head> 
<meta charset="utf-8"> 
<!-- saved from url=(0014)about:internet --> 
<title>A Tiny HTML Document</title> 
«script src="scripts.js"></script> 
</head> 


这 条 注释 告诉 mtemet Explorer 将 页 面 视 为 从 远程 网 站 上 下 载 下 来 的 。 否则 , 下 会 切换 到 一 种 特殊 
的 锁定 模式 ， 弹 出 一 条 安全 警告 ， 在 你 点 了 “人 允许 阻止 的 内 容 ” 按 钮 之 后 才 会 执行 JavaScript 代 码 。 
其 他 所 有 浏览 需 都 会 忽略 这 个 “Web 标 志 "” 注释 , 对 远程 站 点 和 本 地 文件 使 用 相同 的 安全 设置 。 















































注 1: 参见 “Mark of the Web”: http://msdn.microsoft.com/zh-cn/library/ms537628(v=vVs.85).aspx。( 译 者 注 ) 
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如 果 你 按照 上 面 这些 步 又 做 了 ， 那 就 有 了 一 个 如 下 所 示 的 HIML5 文 档 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>A Tiny HTML Document</title> 
<link href="styles.css" rel="stylesheet"> 
«script src="scripts.js"></script> 
</head> 


<body> 

<p>Let's rock the browser, HIML5 style.</p> 
</body> 
</html> 


虽然 这 不 再 是 一 个 最 短 的 HTML5 文 档 ,， 但 以 它 为 基础 可 以 构建 出 任何 网 页 。 这 个 例子 本 身 
没什么 可 圈 可 点 之 处 , 不 过 在 下 一 章 创 建 真 实 网 页 的 过 程 中 , 我 们 会 为 内 容 精 心 设计 布局 并 通过 
CSS 应 用 样式 。 














注意 本 节 介 绍 的 所 有 HTML5 语 法 一 一 新 的 文档 类 型 声明 、 声 明 字 符 编 码 的 元 数据 元 素 、 语 言 
售 息 属性 和 引用 样式 表 及 JavaScript 标 签 ， 同 时 适用 于 新 旧 浏 览 器 。 因 为 这 些 语法 依赖 于 
所 有 浏览 器 的 默认 行为 和 内 置 的 纠 错 机 制 。 


1.4 HTML5 语法 


如 前 所 述 ，HTML5 放 松 了 某 些 规则 。 这 是 因为 HTML5 的 制定 者 想 让 这 门 语言 更 紧密 地 反映 
浏览 器 的 现实 。 换 句 话 说 ,他们 想 缩小 “可 以 工作 的 网 页 ”与 “根据 标准 是 有 效 的 网 页 ”之 间 的 
差距 。 接 下 来 ,我们 就 介绍 一 下 HTML5 改 变 的 语法 规则 。 





注意 没 错 ， 还 有 很 多 浏览 器 支持 的 老式 做 法 被 HTML5 标 准 严 格 排除 在 外 。 要 想 在 自己 的 见面 
中 及 时 改正 这 些 老 毛病 ， 需 要 用 到 1.4.2 节 介绍 的 HTML5 了 验证 器 。 


1.4.1 放松 的 规则 


在 初次 体验 HTML5 文 档 之 后 ， 我 们 知道 HTML5 并 不 要 求 网 页 中 必须 包含 chtml>、<head> 和 
<body> 元 素 ( 尽管 它们 的 存在 有 时 候 非 常 有 用 )。 但 HTML5 的 轻松 态度 还 不 止 于 此 。 
HTML5 不 区 分 大 小 写 ， 因 此 类 似 下 面 这 样 的 标记 是 没有 问题 的 : 


<P>Capital and lowercase letters <EM>don't matter</eM> in tag names.</p>. 
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HTML5 还 允许 省 略 关 闭 空 元 素 (void element ) 的 斜 杜 ; 所 谓 空 元 素 ， 就 是 不 会 般 套 内 容 的 
元 素 ， 如 <img> (图像)、<br>( 换行 ) 或 chr>( 水平 线 )。 以 下 是 三 种 添加 换行 的 等 价 方式 : 


I cannot<br /> 
move backward<br> 
or forward.<br/> 
I am caught 


HTML5 也 修改 属性 的 语法 规则 。 属 性 值 中 只 要 不 包含 受 限 的 字符 ( 比如 > 、= 或 空格 )， 就 可 
以 不 加 引号 。 下 面 这 个 <img> 元 素 就 利用 了 这 一 点 : 

<img alt="Horsehead Nebula" src=Horsehead01.jpg> 

只 有 属性 名 没有 属性 值 也 可 以 。 虽 然 XHTML 要 求 必 须 采 用 如 下 宛 余 的 语法 将 复 选 框 设 置 为 
选中 状态 : 

<input type="checkbox" checked="checked" /> 

但 现在 可 以 只 包含 属性 名 ， 回 到 HTML 4.01 时 代 的 传统 短语 法 形式 : 

<input type="checkbox" checked> 

对 某 些 人 来 说 ，HTML5 最 令 人 担心 的 还 不 是 这 些 。 他 们 担心 那些 经 常 改变 风格 的 开发 人 员 
会 在 严格 的 和 松散 的 语法 之 间 摇 摆 不 定 , 特别 是 在 一 个 文档 内 部 也 经 常 转换 风格 。 可 是 , 这 种 情 
况 在 XHTML 时 代 同 样 存在 。 无 论 是 严格 还 是 松散 ， 良 好 的 风格 都 取决 于 Web 设 计 师 ， 而 浏览 需 
则 会 无 条 件 地 接受 你 扔 给 它 的 任何 东西 。 

如 果 能 做 到 如 下 几 点 《也 是 本 书后 续 示 例 遵 循 的 约定 一 一 尽管 不 是 必须 遵循 的 )， 基 本 上 就 
可 以 算 作 良 好 的 HTML5 风 格 了 。 
口 包含 可 选 的 chtml>、<body> 和 <head> 元 素 。 要 给 页 面 定义 自然 语言 ( 见 1.3.3 节 )，<html> 
是 最 理想 的 地 方 ; 而 cbody> 和 <head> 有 助 于 将 页 面 内 容 与 其 他 页 面 信息 分 离 。 
口 标签 全 部 小 写 ( 如 用 <p> 而 非 <P> )。 虽 然 不 是 必须 这 么 做 ， 但 这 种 形式 很 常见 ， 输 入 起 来 
要 轻松 容易 得 多 ( 因为 不 需要 按 Shift 键 )， 而 且 不 会 让 人 触目 惊 心 。 
口 为 属性 值 加 引号 。 加 引号 是 有 理由 的 一 一 防止 你 在 不 经 意 间 犯 错 。 要 知道 ,没有 引号 的 

话 ， 一 个 无 效 字符 就 可 能 破坏 整个 页 面 。 

不 过 , 还 有 一 些 老 的 约定 这 里 并 没有 列 出 来 (你 也 可 以 忽略 )。 本 书 的 示例 不 会 关闭 空 元 素 ， 
因为 在 基于 HTML5 编 写 代 码 时 ,大 多 数 人 都 不 居于 添加 额外 的 斜 杠 (/) 类 似 地 , 在 属性 名 与 属 
性 值 相同 的 情况 下 ， 还 一 味 地 留恋 长 属性 的 形式 也 没有 什么 道理 。 
























































































































































1.4.2 HTML5 验证 


没准 儿 新 的 松散 的 HTML5 语 法 让 你 党 得 很 舒服 。 没 准 儿 ， 一 想到 欢快 的 浏览 需 表 后 可 能 隐 
藏 着 不 一 致 的 、 到 处 都 是 错误 的 标记 ,你 简直 夜 不 能 呵 。 如 果 你 不 幸 是 后 一 种 情况 ,那么 一 定 会 
高 兴 听 到 这 个 消息 : 有 验证 工具 可 以 帮 你 抓 住 那些 与 HTIML5S 推 荐 标准 不 相符 的 标记 ， 甚 至 都 不 
会 惊扰 浏览 需 。 
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以 下 就 是 HTML5 验 证 带 会 关注 的 一 些 可 能 的 问题 : 

口 缺少 必需 的 元 素 〈 例如 <title> 元 素 ); 

口 有 开始 标签 但 没有 结束 标签 ; 

口 标签 柚 套 错误 ; 

口 不 包含 必要 属性 的 标签 ( 例如 没有 src 属 性 的 <img> 元 素 ); 

口 元 素 或 内 容 放 错 了 地 方 ( 例如 把 文本 直接 放 在 了 <head> 区 块 中 )。 
Dreamweaver 等 Web 设 计 工 具 都 有 它们 自 带 的 验证 器 。 如 果 你 嫌 麻 烦 ， 也 可 以 使 用 在 线 验 证 

工具 ， 下 面 我 们 展示 如 何 使 用 W3C 标 准 组 织 提供 的 流行 的 验证 器 。 
(1) 在 浏览 器 中 ， 打 开 http:/validatorw3.org ( 图 1-2 )。 





























时 昌国 导 图 1-2，W3C 的 验证 器 站 点 














加 Thewsc Markup Validati… 中 
所 CE © validatorw3.org/#validate by input 一 家 色 http:/vallidator.w3.org 提 供 了 且 
“个 验证 HTML 的 选项 , 可 以 填写 
Wt MW ET eV lle lilo ST 网 页 的 地 址 、 上 传 网 页 或 直接 输 
SR 入 标记 ( 如 图 所 示 就 是 直接 输入 
Validate by URI ValidatebyFileUpload Validate by DirectJnput : 标记 ) 


Validate by direct input 
Enter the Markup to validate: 





<!DOCTYPE html> 人 
<html lang="en"> 门 
<head> 





<meta Cl 
<link hrerf: 
<script sr 

</head> 


<body> 
<p>Be careful not to overlap nearby nested elements, <strong>or else!</p></strong> 
</body> 


</html> 
» More Options 


Check 








validator,w3,0rg/svalidate_by_input 




















(2) 单 击 相 应 的 选项 卡 ， 提 供 HTML 内 容 。 

口 “Validate by URI” 可 以 验证 已 经 存在 的 网 页 。 只 要 在 Address( 地 址 ) 框 中 输入 页 面 的 URL 

即 可 (例如 http://www.mysloppysite.com/FlawedPage.html )。 

口 “Validate by File Upload” 可 以 验证 你 电脑 硬盘 上 的 页 面 。 首 先 ， 单 击 Browse( 浏览 ) 按 
钮 (在 Chrome 中 单 击 Choose File< 选 择 文件 > )。 在 “打开 ”对 话 框 中 ， 选 择 HTML 文 件 并 
单 击 Open ( 打开 )。 

口 “Validate by Direct Input” 可 以 验证 任何 标记 一 一 只 要 在 大 文本 框 里 输入 即 可 。 从 文本 编 
辑 器 中 直接 把 标记 复制 粘贴 到 W3C 验 证 页 面 的 文本 框 里 是 最 简单 的 方式 。 
在 继续 之 前 ， 可 以 单 击 More Options( 更 多 选项 ) 修改 设置 ， 不 过 一 般 不 用 。 最 好 是 让 验证 

器 自动 检测 文档 类 型 ， 因 为 这 样 验证 器 会 使 用 你 在 网 页 中 指定 的 文档 类 型 。 类 似 地 ， 除 非 你 的 页 

面 中 使 用 了 不 同 的 语言 ， 而 验证 器 无 法 确定 正确 的 字符 集 ， 否 则 就 用 自动 检测 好 了 。 
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(3) 单 击 Check ( 检测 ) 按钮 。 
这 样 就 会 把 HTML 页 面 发 送 到 W3C 验 证 器 。 稍 微 等 一 会 儿 ， 就 会 看 到 报告 。 你 会 看 到 自己 的 
文档 是 和 否 通过 了 验证 ， 而 如 果 失 败 的 话 ， 则 会 看 到 验证 器 检测 到 的 错误 ( 见 图 1-3 )。 


























国 rnvaidl Markup validati. “=e 1-3: 验证 器 发 现 了 由 两 个 过 失 
€ CGC © validatorw3.org, check 如 安 | | 衍生 出 来 的 四 个 差错 。 首先 9 页 











面 中 没有 必需 的 <title> 元 素 ; 其 
次 ,，*p> 元 素 在 做 套 的 <strong> 结 


Validation Output: 4 Errors 


@ Line 7, Column 7: Element head is missing a required instance of child element title. 
束 之 前 先 结束 。 ( 要 解决 这 些 问 
</head> 
document is an i iment or if title information is available from a higher-level 





cdo 
rotocol: Zero or more elemenis ofm 
therwise: One or more elements hr 


</strong></p> 即 可 。 ) 顺便 说 一 
句 ， 这 个 文档 中 的 问题 并 不 影响 
@ Line 10, Column 75: End tag p seen, but there were open elements. | 所 有 浏览 筑 器 正确 地 显示 它 已 


data C onte nt, of which exactly one is a title element. 


onePe torel forie eon pas | 题 把 </p></strong> 替 换 成 
| 
| 








-Be careful not to overlap nearby nested elements, <strong>or else!</p></strong> 


加 Line 10, Column 63: Unclosed element strong. 


-Be careful not to overlap nearby nested elements, <strong> or else!</p></strong> 


@ Line 10, Column 84: No element strong to close. 


-Be careful not to overlap nearby nested elements, <strong>or else!</p></strong> 




















注意 ”即便 是 验证 之 后 没有 发 现 一 点 问题 的 文档 ， 验 证 器 也 会 给 


人 警告 ， 包 括 字符 编码 是 
自动 检测 到 的 ，HTML5 验 证 服务 还 处 于 试验 阶段 、 还 不 完 


出 一 
善 


1.4.3 XHTML 的 回归 


如 前 所 述 ，HTML5 宣 布 了 上 一 个 Web 王 朝 一 一 XHTML 时 代 的 终结 。 但 是 ， 现 实 可 没有 那么 
简单 ，XHTML 的 拥 厂 也 不 必 放 弃 上 一 代 标 记 语 言 中 自己 最 热爱 的 东西 。 

首先 , 别 忘 了 XHTML 语 法 还 在 呢 。XHTML 强 制 要求 的 规则 要 么 仍 具 有 指导 意义 (例如, 元 
素 要 正确 能 套 )， 要 么 仍然 是 一 种 得 到 支持 的 可 选 约定 ( 例如， 空 元 素 可 以 包含 结束 的 斜 杠 )。 

要 是 想 强 制 使 用 XHTML 语 法 呢 ?” 也 许 你 担心 自己 (或 者 自己 的 同事 ) 在 不 经 意 间 “ 随 落 ” 
到 使 用 过 去 HTML 的 松散 语法 。 不 要 紧 ， 可 以 使 用 XHTML5; 这 个 标准 还 没有 多 少 人 知道 ， 其 本 
质 是 给 HTMLS 加 上 了 XML 的 限制 。 

如 果 想 把 一 个 HTMLS 文 档 转换 成 XHTMLS 文 档 , 必须 在 <htm1> 元 素 中 明确 添加 XHTML 命名 
空间 、 关 闭 每 一 个 元 素 、 所 有 标签 都 要 小 写 …… 下 面 就 是 一 个 XHTML5 文 档 的 示例 : 


“1DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
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<head> 
<meta charset= "utf-8"/> 
<title>A Tiny HTML Document</title> 
<link href="styles.css" rel="stylesheet"/> 
«script src="scripts.js"></script> 
</head> 


<body> 

<p>Let's rock the browser, XHTML5 style.</p> 
</body> 
</html> 


这 样 ， 就 可 以 使 用 XHTML5 验 证 器 基于 早先 的 XHTML 规则 对 其 进行 更 严格 的 错误 检测 了 。 
标准 的 W3C 的 验证 器 不 行 ,但 可 以 使 用 http:/validatorw3.org/nu， 这 个 验证 器 在 Preset ( 预 设 ) 下 
拉 列 表 中 提供 了 XHTML5 选 项 。 如 果 你 不 是 直接 输入 页 面 的 标记 , 或 者 不 是 把 标记 粘贴 到 文本 框 
中 ， 那 还 需要 选 上 “Be lax about content-type”( 不 严格 要 求 content-type )。 

按照 上 述 步 又 ， 你 可 以 创建 并 验证 一 个 XHTML 文档 。 可 是 ， 浏 览 器 仍然 只 会 将 你 的 页 面 当 
成 HTML5 文 档 来 解释 ， 只 不 过 这 个 文档 有 意 要 向 XML 靠 拢 黑 了 。 除 此 之 外 ， 浏览 器 不 会 应 用 任 
何 规 则 。 

如 果 你 想 系统 地 支持 XHTML5 ， 还 必须 配置 Web 服 务 器 ， 以 application/xhtml+xml 或 
application/xml 的 MIME 类 型 来 提供 网 页 ( 不 能 再 使 用 text/html; 有 关 MIME 类 型 请 参见 $.3.1 节 )。 
不 过 , 在 致电 主机 托管 公司 之 前 , 务必 清醒 地 认识 到 : 这 一 修改 会 导致 IE9 之 前 所 有 版 本 的 Internet 
Explorer 均 无 法 显示 你 的 页 面 。 换 句 话说， 真正 的 XHTMLS 有 浏览 器 兼容 性 问题 。 

有 了 时候， 即便 支持 XHTML5 的 浏览 器 在 处 理 XHTML5 文 档 时 也 会 与 处 理 普通 的 HTML5 文 档 
有 所 区 别 。 这 些 浏览 右 将 它 作 为 XML 文 档 处 理 ， 如 果 处 理 失 败 ( 比如 因为 你 有 个 地 方 没 写 对 )， 
浏览 器 就 不 会 再 解释 文档 的 其 他 部 分 了 。 

到 底 什 么 时 候 使 用 XHTML5? 对 于 绝 大 多 数 Web 开 发 人 员 ， 无 论 是 一 般 人 还 是 HTML5 的 铁 
杆 粉 缘 ， 都 没有 必要 使 用 XHTML5 ， 以 免 招 营 麻 烦 。 唯 一 的 例外 ， 就 是 那些 以 XML 作 为 开发 日 
标的 程序 员 。 例 如 ， 想 要 使 用 XQuery 和 XPath 等 XML 相关 的 标准 来 操作 页 面 内 容 的 开发 人 员 。 



























































提示 “对 于 好 奇 的 读者 ,我 可 以 告诉 你 一 个 技巧 ,能 让 浏览 器 切换 到 XHTML 模式 一 一 只 要 把 文 
件 的 扩展 名 改 为 .xhtml 或 .xht 即 可。 然后 在 硬盘 中 打开 这 个 文件 ,多数 浏览 器 ( 包括 Firefox、 
Chrome 和 IE9+ ) 都 会 认为 该 页 面 是 从 Web 服 务 器 下 载 下 来 的 ， 而且 MIME 类 型 为 XML。 
如 果 页 面 中 有 什么 错误 , 浏览 器 窗口 会 显示 只 处 理 了 一 部 分 的 页 面 (IE )、XML 错误 消 息 
( Firefox ) 或 二 者 的 组 合 ( Chrome )。 


1.5 HTML5 元 素 家 族 


到 目前 为 止 ,本 章 集 中 讨论 了 HTML5 语 法 的 变化 ,但 更 重要 的 则 是 新 增 减少 及 改变 了 HTML 
哪些 支持 的 元 素 。 接 下 来 的 几 节 将 分 别 讨论 这 些 方面 的 变化 。 
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1.5.1 新 增 的 元 素 


在 接 下 来 的 儿童 ,我们 将 主要 把 时 间 放 在 学 习 新 元 素 上 , 这 些 元 素 在 此 之 前 从 来 没有 在 网 页 
中 出 现 过 。 表 1-1 列 表 出 这 些 新 元 素 ( 以 及 哪 一 章 包 含 对 相应 元 素 的 详细 介绍 )。 
表 1-1 HTML5 新 增 的 元 素 


























类 别 元 素 哪 部 分 详细 介绍 
用 于 构建 页 面 的 ”xarticle>、 xaside>、<figcaption>、<figure>、<footer>、<header>、 第 2 章 
语义 元 素 <nav>、<section>、<details>、<summary> 


用 于 标识 文本 的 ”<mark>、<time>、<wbr> (以 前 就 支持 ， 但 现在 已 经 正式 列 入 规范 ) 第 3 章 
语义 元 素 
Web 表 单 及 交互 “input> (不 是 新 元 素 , 但 增加 了 很 多 了 类 型 ) 、<datalist>、<keygen>、 第 4 章 
<meter>、<progress>、<command>、<menu>、<output> 


音频 、 视 频 及 插件 ”<audio>、<video>、<source>、<embed> (以 前 就 支持 ,但 现在 已 经 正 ”第 5 章 




















式 列 入 规范 ) 
Canvas <canvas> 第 8 章 
非 英 语 支持 <bdo>、<rp>、<rt>、<ruby> HTMLS5 规 范 http://dev. 





w3.org/htmlS/markup 


1.5.2 ”删除 的 元 素 


HTML5S 一 方面 添加 了 新 元 素 ， 另 一 方面 也 从 官方 标准 中 剔除 了 少量 元 素 。 这 些 元 素 仍 然 可 
以 得 到 浏览 器 支持 ， 但 任何 遵循 规范 的 HTML5 验 证 器 都 会 敏感 地 查 出 它们 的 藏身 之 所 ， 并 给 出 
错误 提示 。 

最 明显 的 一 点 是 ，HTMLS 沿 袭 了 不 欢迎 表现 性 元 素 的 思想 ( 最 初 萌 发 于 XHTML )。 所 谓 表现 
性 元 素 ， 指 的 是 那些 仅仅 是 为 网 页 添加 样式 的 元 素 ， 而 连 最 菜 的 Web 设 计 人 员 也 知道 那 是 样式 表 
该 干 的 事 儿 , 被 吻 除 的 元 素 都 是 专业 开发 人 员 很 多 年 没有 用 过 的 元 素 ( 如 <big>、<center>、<font>、 
<tt> 和 <strike> )。HTML 的 表现 性 属性 也 与 之 “同归于尽 ”了 ,没有 什么 必要 在 这 里 列 出 来 了 。 

此 外 ，HTML5 进 一 步 埋 芋 了 Web 开 发 人 员 原 来 已 经 握 弃 的 HTML 框 架 。 最 初 ，HTML 框 架 似 
平 是 在 浏览 器 窗口 中 显示 多 个 网 页 的 不 错 方式 ,但 如 今 ， 框 架 往 往 意 味 着 严重 的 可 访问 性 问题 ， 
因为 它们 难以 适应 搜索 引 敬 、 辅 助 软件 和 移动 设备 。 而 有 意思 的 是 ，<iframe> 元 素 ( 通过 它 可 以 
将 一 个 网 页 放 在 另 一 个 网 页 中 ) 倒是 侥幸 得 以 保留 。 究 其 原因 ， 主 要 是 Web 应 用 经 常 要 利用 
<iframe> 实 现 一 些 集成 任务 ， 比 如 在 网 页 中 包含 YouTube 窗 口 、 广 告 和 谷歌 搜索 框 等 。 

还 有 另外 一 些 元 素 ， 由 于 宛 余 或 容易 导致 误会 等 原因 也 被 剔除 了 ， 比 如 <acronym> ( 代 之 以 
<abbr> ) 和 <applet>( 因为 <object> 更 好 )。 但 元 素 家 族 的 绝 大 部 分 成 员 照旧 还 生活 在 HTML5 时 代 。 













































































注意 HTML5 元 素 家 族 中 保留 的 元 素 超过 100 个 。 除 此 之 外 ， 差 不 多 有 30 个 新 元 素 ， 还 有 大 约 
10 个 有 显著 改变 。 要 了 解 完 整 的 元 素 列 表 ( 以 及 哪些 是 新 元 素 、 哪 些 改变 了 )， 请 参考 
http:/dev.w3.org/htmlS/markup/。 
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1.5.3 ”改变 的 元 素 


HTML5 还 有 男 一 个 奇怪 的 做 法 : 有 时 候 会 将 一 个 旧 元 素 用 于 新 的 目的 。 例 如 ，<smal1> 元 素 
的 用 途 不 再 是 减少 文本 字体 的 大 小 ( 这 本 来 应 该 是 样式 表 的 任务 )。HTML5 虽 然 删 除了 <big> 元 
素 , 但 却 保留 了 <smal1> 元 素 , 不 过 含义 变 了 。 现在 ,<small> 元 素 表 示 “ 附 属 细则 ”( small print )， 
比如 页 面 底部 没 人 想 让 你 看 到 那些 法 律 条 款 : 


<small>The creators of this site will not be held liable for any injuries that may result from unsupervised 
unicycle racing.</small> 


放 在 <small> 元 素 中 的 文本 仍然 照常 显示 ， 只 不 过 字体 稍 小 一 点 ， 除 非 你 可 使 用 样式 表 重 写 
它 的 样式 。 











注意 人 们 对 <small> 元 素 有 两 种 看 法 。 一 种 看 法 认为 它 做 到 了 最 大 限度 的 向 后 兼容 ， 因 为 老 浏 
览 器 都 支持 csmall> 元 素 , 而 HTML5 页 面 中 还 将 继续 支持 它 。 另 一 种 看 法 认为 它 会 导致 旧 
网 页 中 相应 元 素 的 语义 变化 ， 过 去 是 用 <smal1> 元 素来 减少 文本 大 小 ， 但 其 中 的 文本 不 一 
定 就 是 “附属 细则 ”之 类 的 。 


另 一 个 改变 的 元 素 是 <hr> (horizontal rule, 水 平 线 ), 用 于 在 两 个 区 块 间 夯 一 条 线 。 在 HTML5 
中 ，<hr> 表 示 主 题 的 转换 ， 即 从 一 个 主题 变 为 男 一 个 主题 。 默 认 的 格式 还 在 ， 只 不 过 又 赋予 了 新 
的 含义 。 

类 似 地 ，<s>( struck text， 删 除 的 文本 ) 也 不 仅仅 是 给 文本 加 一 条 删除 线 那 么 简单 了 ， 它 现 
在 表示 不 再 准确 或 不 再 相关 的 内 容 。<hr> 元 素 与 <s> 元 素 的 变化 都 不 及 <small> 元 素 那 么 大 ， 至 少 
还 与 它们 传统 HTML 中 的 用 法 有 联系 。 

粗 体 和 和 斜体 

要 说 最 重要 的 变化 ， 非 粗 体 和 和 斜体 这 两 个 格式 化 元 素 莫 属 。XHTML 1.0 诞 生 后 ，HTML 中 最 
常用 的 两 个 表示 粗 体 和 和 斜体 的 元 素 <b> 和 <i> 部 分 被 <strong> 和 <em> 元 素 取 代 。 其 背后 的 思想 是 停 
止 从 格式 ( 粗 体 和 和 斜体 ) 的 角度 来 看 问题 ,而 是 要 换 成 使 用 具有 真实 逻辑 含义 ( 重要 或 重音 ) 的 
元 素 。 这 种 思想 当然 很 有 意义 ,但 cb> 和 <i> 这 两 个 标签 仍然 作为 XHTML 新 引入 的 两 个 标签 的 简 
写 形式 存在 着 ， 因 为 大 家 对 它们 更 熟悉 。 

HTML5 尝 试 解决 这 个 问题 。 它 没有 强迫 开发 人 员 放 弃 <bp> 和 <i>， 而 是 为 这 两 个 元 素 赋予 了 
新 的 含义 。 背 后 的 思想 就 是 允许 上 述 4 个 元 素 在 有 效 的 HTMLS 文 档 中 共存 ,但 结果 多 少 让 人 有 点 
迷惑 ， 下 面 分 别 说 明 。 
口 使 用 <strong> 表 示 重 要 的 文本 内 容 ， 也 就 是 那些 需要 在 周围 文本 中 突出 出 来 的 文本 。 
口 使 用 <b> 表 示 应 该 用 粗 体 表 示 的 文本 ， 但 该 文本 并 不 比 其 他 文本 更 重要 。 比 如 ， 关 键 字 、 
产品 名 称 等 所 有 需要 用 粗 体 表示 的 文本 都 可 以 用 这 个 标签 。 
口 使 用 <em> 表 示 重 读 的 文本 ， 也 就 是 在 朗读 的 时 候 要 大 声 读 出 来 。 
口 使 用 <i> 表 示 应 该 用 斜体 表示 的 文本 , 但 该 文本 并 不 比 其 他 文本 更 重要 。 比 如 , 外 文 单词 、 
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技术 术语 等 所 有 需要 使 用 斜体 表示 的 文本 都 可 以 用 这 个 标签 。 
以 下 这 段 代 码 以 适当 的 方式 使 用 了 上述 全 部 4 个 标签 : 


<Sstiong>Breaking news!</strong> There's a sale on <i>leche quemada</i> candy 
at the <b>El Azul</b> restaurant. Don't delay, because when the last candy 
is gone, it's <em>gone</em>. 


在 浏览 器 中 ,会 看 到 如 下 结 


Breaking news! There’s a sale on leche quemada candy at the El Azul restaurant. Don’t 





delay, because when the last candy is gone, it’s gone. 
对 Web 开 发 人 员 来 说 , 他 们 有 的 会 遵循 HTML5 这 个 善意 的 规则 , 有 的 还 是 继续 使 用 自己 最 熟 
悉 的 元 素 去 标 粗 体 和 和 斜体 格式 。 





1.5.4 调整 的 元 素 


HTML5 也 调整 了 一 些 元 素 的 使 用 规则 。 要 说 啊 , 这 些 调整 只 有 那些 死 钻 HTML 的 家 伙 才 会 注 
意 到 ， 但 偶尔 也 会 产生 比较 大 的 影响 。 举 一 个 例子 ， 不 太 常 用 的 <address> 元 素 并 不 适合 标注 邮 
政 地 址 ( 尽管 address 是 “地 址 ”的 意思 )。 实 际 上 ， 这 个 元 素 只 有 一 个 目的 ， 即 提供 HTML 文 档 
作者 的 联系 信息 ， 比 如 电子 邮件 地 址 或 网 站 链接 : 


Our website is managed by: 

<address> 

<a href="mailto:jsolo@mysite.com">John Solo</a>, 

<a href="mailto:lcheng@mysite.com">Lisa Cheng<a>, and 
<a href="mailto:rpavane@mysite.com">Ryan Pavane</ay> . 
</address> 


青 比如 ，<cite> 元 素 的 含义 也 不 一 样 了 。 当 然 , 像 下 面 这 样 引用 某 些 作品 ( 如 新 闻 、 文 章 、 
电视 节目 ) 还 是 可 以 的 : 

<p>Charles Dickens wrote <cite>A Tale of Two Cities</cite>.</p> 

可 是 ,现在 用 <cite> 去 标注 人 名 已 经 不 对 了 。 这 个 变化 最 终 导 致 了 令 人 意 想不到 的 争议 ， 
为 以 前 是 可 以 这 么 用 的 。 一 些 “ 骨 灰 ” 级 的 Web 开 发 人 员 公开 发 表 言论 , 鼓动 人 们 不 用 遵守 <cite> 
的 新 使 用 规则 。 这 可 真 让 人 有 点 匪夷所思 ,毕竟 你 一 非 子 能 在 编辑 网 页 的 时 候 看 见 几 回 <citey 元 
素 啊 ? 
对 用 于 创建 链接 的 <a> 元 素 的 调整 幅度 相对 更 大 一 些 。HTML 以 前 的 版 本 允许 用 <a> 元 素来 标 
注 可 以 单 击 的 文本 或 图 像 。 而 在 HTML5 中 ， 可 以 在 <a> 元 素 中 放置 任何 东西 ; 就 是 说 ， 你 在 里 面 
放 上 一 大 段 文字 、 一 个 列表 、 几 幅 图 像 …… 都 没有 问题 。( 如 果 你 真 这 么 做 ， 那 就 会 发 现 里 面 的 
所 有 文本 都 会 变 成 蓝 色 并 带 有 下 划 线 ， 而 图 像 则 会 产生 蓝 色 的 边框 。) Web 浏 览 器 支持 这 种 做 法 
已 经 有 很 多 年 了 ，HTML5 只 不 过 是 把 这 种 行为 写 进 了 规范 ， 即 便 这 种 用 法 没什么 大 用 处 ， 但 毕 
竟 已 经 列 人 了 标准 。 

还 有 一 些 调整 在 目前 所 有 浏览 器 中 都 还 未 得 到 文 持 。 例 如 ，*ol> 元 素 ( 有 序列 表 ) 现在 有 了 
一 个 reversed 属 性 ， 用 于 反 转 序号 ( 直到 1 或 其 他 通过 start 属 性 设置 的 正 序 时 的 起 始 值 )。 不 过 ， 
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这 个 属性 目前 只 有 Chrome 和 Safari 支 持 。 
在 学 习 本 书 的 过 程 中 ， 我 们 还 会 陆续 介绍 其 他 一 些 被 调整 了 使 用 规则 的 元 素 。 


1.5.5 “标准 化 的 元 素 


HTML5 还 把 一 些 浏览 器 实际 支持 ， 但 并 没有 得 到 之 前 的 HTML 或 XHTML 规范 承认 的 元 素 加 
入 了 标准 。 其 中 最 广为人知 的 一 个 元 素 就 是 cembed> ， 这 个 元 素 在 目前 的 网 页 中 得 到 了 普遍 使 用 ， 
成 为 了 一 种 向 页 面 中 加 入 插件 的 通用 方法 。 

男 一 个 新 元 素 是 <wbr>， 表 示 可 以 在 某 处 断 行 。 换 句 话 说， 如 果 某 个 词 太 长 了 , 一行 放 不 下 ， 
那 浏览 器 就 会 在 cewbr> 标 注 的 地 方 断 开 : 

<p>Many linguists remain unconvinced that 

<b>supercali<wbr>fragilistic<wbr>expialidocious</b> is indeed a word.</p> 


如 果 需 要 在 小 空间 ( 如 表格 单元 或 小 方块 ) 里 放 长 名 字 ( 比如 编程 语言 中 的 变量 名 )， 可 以 
用 <wbr> 来 标注 可 以 在 名 字 的 什么 地 方 断 行 。 不 过 ， 即 使 浏览 器 支持 <wbr>， 它 也 只 会 在 相应 空间 
盛 不 下 长 名 字 时 才 会 断 行 。 对 于 前 面 的 标记 ， 在 浏览 需 中 有 可 能 看 到 以 下 三 种 情况 : 



























































Many linguists remain 
unconvinced that 
supercalifragilisticexpialidocious 
is indeed a word. 





Many linguists remain 
unconvinced that 
supercalifragilistic 
expialidocious is indeed a 
word. 





Many linguists 
remain 
unconvinced 
that supercali 
fragilistic 
expialidocious 
is indeed a 
word. 


说 到 <wbr>， 难 免 会 让 人 想起 类 似 的 cnobr> 元 素 ， 后 者 用 于 阻止 文本 换行 ， 可 用 空间 再 小 也 
不 行 。 但 HTML5 认 为 cnobr> 已 经 不 合 时 宜 ， 建议 所 有 自重 的 Web 开 发 人 员 不 要 再 使 用 它 了 。 要 想 
达到 同样 的 效果 ， 可 以 在 CSS 中 使 用 white-space 属 性 ， 将 它 的 值 设 定 为 nowrap。 


1.6 今天 开始 用 HTML5 


在 使 用 HTML5 之 前 ， 必 须知 道 你 的 用 户 浏 览 絮 对 它 的 支持 情况 。 毕 竞 ， 我 们 希望 得 到 的 是 
一 个 耀眼 的 新 页 面 ， 而 非 一 堆 混 乱 的 标记 和 遇 上 过 时 浏览 需 就 错误 百出 的 脚本 。 
稍 后 , 我 们 会 介绍 怎么 知道 HTML5 的 哪个 具体 功能 得 到 了 哪些 浏览 絮 的 支持 ,以 及 你 的 用 户 
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中 有 多 大 比例 在 使 用 这 些 浏览 器 。 不 过 ， 在 此 之 前 ， 我 们 先 概括 一 下 HTML5S 当 前 受 支 持 的 情况 。 
口 如 果 你 的 用 户 使 用 流行 的 Chrome 或 Firefox， 总 体 来 说 问题 不 大 。 这 两 款 浏览 器 不 仅 已 经 
支持 HITML5 很 多 年 了 ， 而 且 都 能 够 自动 升级 。 换 句 话 说， 不 大 可 能 有 这 两 款 浏览 器 的 老 
版 本 存在 。 

口 如 果 你 的 用 户 使 用 Safari 或 Opera， 那 也 还 好 。 这 两 款 浏览 器 同样 支持 HTML5 很 多 年 了 ， 

同样 也 没有 多 少 老 版 本 用 户 。 

口 如 果 你 的 用 户 使 用 平板 电脑 或 智能 手机 ， 那 可 能 某 些 功能 会 有 一 些 限制 ， 本 书后 面 还 会 
介绍 到 。 不 过 ， 所 有 今天 的 移动 浏览 器 在 设计 时 都 会 考虑 支持 HTML5， 因 此 你 的 网 页 偶 
尔 可 能 出 现 点 问题 ， 但 总 体 还 可 以 接受 。 

口 如 果 你 的 用 户 使 用 旧版 本 的 下 ， 也 就 是 IE10 之 前 的 任何 版 本 ， 那 大 多 数 HTML5 功 能 都 将 无 
法 使 用 。 问 题 在 哪儿 呢 ? 因为 如 今 很 多 旧版 本 Windows 仍 然 常见 ， 这 些 操 作 系 统 都 预 装 了 
旧版 本 正 。 更 糟糕 的 是 ， 很 多 旧版 本 Windows 会 阻止 用 户 升级 到 现代 的 支持 HTML5 的 正 。 
比如 Windows Vista 只 允许 用 户 使 用 IEE9， 而 在 令 人 谈 之 色 变 的 WindowsXP 上 则 只 能 用 IE8。 

并 非 微软 想 要 阻挠 Web 的 发 展 ， 而 是 新 版 本 IE 都 是 针对 新 硬件 设计 的 。 换 句 话 说， 新 软件 放 

到 旧 硬 件 上 就 是 不 能 运行 。 然 而 ， 使 用 旧版 Windows 的 用 户 还 可 以 选择 Firefox 替 代 正 ， 只 不 过 有 

人 不 知道 怎么 安装 Firefox， 或 者 不 被 多 许 这 么 干 罢了 。 
















































































注意 尽管 IE6 和 IE7 已 经 基本 退出 了 历史 姓 台 ， 但 (写作 本 书 时 ) IE8 和 IE9 的 流量 仍然 有 百 分 
之 十 以 上 。 我 们 当然 不 能 忽视 百 分 之 十 的 用 户 ， 因 此 必须 想 办 法 为 大 多 数 HTMLS 功 能 寻 
找 替换 手段 ， 至 少 在 不 远 的 将 来 还 是 需要 这 样 做 。 


对 付 旧 版 本 的 浏览 
接 下 来 的 几 年 ， 一 些 用 户 的 浏览 器 可 能 仍然 不 会 支持 你 要 使 用 的 全 部 HTMLS 功 能 。 这 是 
我 们 要 面 对 的 现实 。 不 过 ， 只 要 你 不 介意 麻烦 点 儿 ， 那 也 不 是 问题 。 这 时 候 有 两 种 处 理 方式 。 

口 平稳 退化 。 有 时 候 ， 如 果 某 个 功能 不 被 浏览 器 支持 ， 也 不 是 什么 大 问题 。 例 如 ，<videoy 
元 素 提 供 了 一 种 后 备 机 制 ， 可 以 为 老 的 浏览 器 提供 替代 内 容 (比如 使 用 Flash 播 件 的 视 
频 播 放 器 )。 只 显示 一 条 错误 消息 就 很 不 礼貌 了 ， 不 能 成 为 平稳 退化 的 模范 1 还 有 一 些 
表单 功能 (例如 占 位 符 文本 )， 以 及 像 圆 角 和 投影 之 类 的 CSS3 属 性 ， 较 老 的 浏览 器 完全 
可 以 忽略 它们 。 当 然 ， 可 以 写 一 些 JavaScript 代 码 来 检测 浏览 器 是 否 支持 你 想 使 用 的 功 
能 (可 以 使 用 Modernizr )。 如 果 不 支持 ， 则 显示 较 少 内 容 或 使 用 不 那么 花哨 的 方式 。 

口 借 助 JavaScript。HTML5 的 很 多 新 功能 都 源 自 Web 开 发 人 员 费 尽心 机 做 出 来 的 东西 。 
因此 ，HTML5 中 的 某 些 功能 完全 可 以 使 用 优秀 的 JavaScript 库 来 实现 (最 差 的 情况 ， 完 
全 通过 手工 编写 JavaScript 代 码 也 可 以 写 出 来 )， 这 一 点 也 不 奇怪 。 通 过 JavaScript 来 实 
现 这 些 功能 很 费事 儿 ， 不 过 网 上 已 经 有 很 多 写 得 很 好 (或 不 那么 好 ) 的 解决 方案 了 ， 
你 可 以 直接 拿 来 使 用 。 其 中 一 些 比较 成 熟 的 则 称 为 “腻子 脚本 ”( 参见 1.6.4 节 )。 
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1.6.1 了 解 浏览 器 支持 情 ; 


到 底 能 使 用 哪些 HTML5 的 功能 ， 最 终 还 是 由 浏览 器 开发 商 说 了 算 。 如 果 它 们 不 支持 某 个 功 
能 ,无论 标准 里 怎么 说 , 最终 还 是 不 能 用 。 今天 ， 主流 的 浏览 器 差不多 有 四 五 个 (不 包括 智能 

、 平板 电脑 等 能 上 网 的 设备 中 的 移动 浏览 器 )。 作 为 个 体 ， 没有 几 个 Web 开 发 人 员 能 自己 完全 
ht ， 更 不 用 说 检测 那些 还 被 很 多 人 使 用 的 老 浏览 器 的 支持 情况 了 。 

好 在 ， 有 一 个 Can I we 网 站 可 以 天 我们 这 个 网 站 可 以 详细 地 列 出 每 一 款 主流 浏览 器 对 
HTML5 的 支持 情况 。 更 重要 的 是 ， 它 还 能 让 你 针对 实际 需要 的 功能 查询 浏览 器 。 下 面 是 这 个 网 
站 的 使 用 指南 。 

(1) 在 浏览 器 中 打开 http://caniuse.com。 

可 以 看 到 ， 主 页 面 中 有 很 多 分 了 组 的 链接 ， 如 CSS、HTML5 ， 等 等 。 

(2) 选择 你 想 了 解 的 功能 。 

找到 功能 的 最 简单 方法 ， 就 是 在 顶部 的 搜索 框 里 输入 并 搜索 。 

或 者 ， 也 可 以 通过 点 击 首 页 中 的 链接 来 查询 某 _- 功能 。 比 如 ，HTML5 链 接 组 是 HTML5 标 准 
中 规定 的 功能 ; JS API 组 是 那些 依赖 JavaScript 的 功能 ， 这 些 功 能 一 开始 属于 HTML5， 但 后 来 又 
被 剥离 了 出 来 ; 而 CSS 组 是 属于 CSS3 的 功能 。 























提示 “点击 每 个 组 的 链接 ， 比 如 HTMLS 或 JS API， 可 以 一 次 性 查看 所 有 功能 的 受 支持 情况 


(3) 查看 结果 ( 图 1-4 )。 

在 每 个 功能 的 表格 中 ,都 会 包含 一 组 不 同 的 浏览 器 版 本 。 表 格 中 用 单元 格 的 颜色 表示 对 功能 
的 支持 情况 : 红色 表示 不 文 持 , 浅 绿色 表示 文 持 ， 橄榄 绿色 表示 部 分 支持 ， 灰 色 表 示 不 确定 (一 
般 是 因为 浏览 器 的 当前 版 本 还 在 开发 过 程 中 ， 相 应 功能 还 没有 加 入 )。 

(4) 查看 更 多 浏览 句 细 闻 。 

起 初 , 这 个 支持 表格 只 包含 流行 浏览 器 的 最 新 版本 。 而 通过 调整 ,也 可 以 让 它 包 含 其 他 浏览 
器 的 支持 情况 ， 比 如 IE7 或 Android 版 移动 Firefox 浏 览 

要 选择 表格 中 包含 哪个 浏览 器 ， 首先 单 击 表格 上 方 的 Show options 链 接 。 然 后 会 出 现 一 组 浏 
览 避 复 选 框 ,选中 复 选 框 ， 可 以 添加 浏览 器 。 拖 动 Version shown 中 的 滑 块 则 可 以 设 定 疹 值 ， 根 据 
需要 排除 不 常用 的 浏览 器 版 本 。 

另外 ， 单 击 表格 左上 角 的 Show all version 链 接 ， 则 可 以 显示 Can I use 数 据 库 里 收集 到 的 所 
有 浏览 器 兼容 信息 。 不 过 ， 这 时 候 的 表格 会 非常 大 ， 而 显示 的 浏览 需 甚 至 包含 古老 的 Firefox 2 
和 IE5.5。 
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全 球 大 约 多 少 用 户 使 图 1-4: audio 得 到 两 个 
不 支持 音频 功能 的 IE 版 本 的 浏览 器 支持 这 个 功能 :和 近 过 audig 得 到 两 个 表 
< ”“ 格 。 第 一 个 表格 展示 的 是 浏览 
o 叱 一 | 展示 的 是 浏览 
二 Search: >- 器 对 <audio> 元 素 的 支持 情况 
3 results found ( 图 中 所 示 ) 
Index Tables Import stats FAQ Resource| Embed ce 
— 绿色 单元 格 中 显示 的 是 完全 
Compatibility tables [lrowser comparison 本 四 
RS EE 支持 音频 功能 的 浏览 器 版 本 
= Supporte = Not supporte = Partially supporte 
» Show options = Support unknown 号 , 红色 单元 格 显示 的 是 不 支 
妾 | 全 的 | 监 马 口 
: i a 持 音频 功能 的 浏览 器 版 本 号 
:Audio element -|working Draft sip a 
Method of playing sould on webpages (without requiring a Partalstgpok Ws 
plug-in) Total: 84.35% 
Show all versions | Firefox Chrome Safari Opera A 和 be 
21 
2.2 
3.2 2 
4.0-4.1 3.0 
26.0 4.2-4.3 4.0 
21.0 27.0 5.1 Oo 二 4.1 7.0 
Current 22.0 28.0 6.0 15.0 6.0-6.1 5.0°7.:0 4.2 10.0 
Near future 23.0 29.0 7.0 7.0 
Farther future 24.0 
Sub-features: Qpus| 
Notes | Knownissues|l;)) Resources (9) Edit on GitHub 
。 Specification [whzltwg.org] reference 
。 Detailed article or S00 eae org] info 
IE 的 这 些 版 本 完 与 这 个 功能 相关 的 
全 支持 音频 功能 一 些 资料 的 链接 
ey 站 上 让、 % 
1.6.2 浏览 器 装机 情况 统计 
怎么 知道 应 该 关注 哪个 浏览 需 版 本 呢 ? 浏览 器 采用 情况 统计 可 以 告诉 你 , 有 多 少 用 户 的 浏览 


需 支 持 你 想 使 用 的 功能 。 为 此 ， 可 以 查看 流行 的 流量 








时 跟踪 站 点 GlobalStats ， 用 法 如 下 。 





(1) 在 浏览 器 中 打开 http:/gs.statcountercom。 


打开 网 站 后 ,可 以 看 到 一 个 折线 图 ， 显 示 着 最 近 几 年 常用 的 浏览 


。 但 此 时 的 图 表 不 包含 版 


本 信息 ， 从 中 也 看 不 出 来 有 多 少 人 还 在 使 用 下 的 那些 问题 版 本 (IE10 之 前 的 版 本 )。 要 看 到 这 些 





信息 人 心 \ 9 还 要 调整 设置 。 
(2) 找到 Stat 链 接 ( 图 表 左下 方 )， 


Fuel js 


这 样 ， 不 仅 可 以 看 到 目前 正在 使 用 的 浏览 器 ， 














点 击 打开 设置 项 ， 


选择 Brower Version ( Combine Chrome& 

















也 能 看 到 使 用 的 是 它们 的 哪个 版 本 。 组 合 








XE 
Chorme 和 Firefox， 是 因为 这 两 款 浏 览 器 更 新 太 快 ， 这 样 可 以 减少 十 几 条 折线 ， 让 图 形 简单 直观 
(图 1-5 )。 
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e he 人 rtiall rn es 2 ss 和 ne 2012 to June 2013 图 1-5 : 如 度 所 示 9 尽管 Chrome 如 日 
中 天 ， 但 IE8 和 IE9 等 问题 浏览 器 仍然 
有 一 定 的 市 场 






































IE7 很 快 就 要 退 ”但 IE8 和 IE9 还 得 
出 历史 舞台 存在 一 段 时 间 














(3) 在 Region 中 选择 地 理 区 域 。 

默认 设置 是 全 球 ( Worldwide )， 即 全 世界 的 使 用 统计 信息 。 可 以 在 这 里 选择 具体 的 国家 (如 
Bolivia ) 或 地 区 (如 North America )。 

(4) 在 Period 中 选择 日 期 范围 。 

一 般 来 说 , 我 们 会 关注 一 整 年 的 浏览 器 使 用 率 变化 情况 。 但 如 有 必要 , 也 可 以 选择 更 短 的 时 
间 范 围 ， 比 如 过 去 的 三 个 月 。 

(5) 使 用 图 表 右 侧 的 选项 按钮 切换 图 表 类 型 。 

选择 Line， 就 是 以 折线 图 显示 浏览 器 使 用 率 随 时 间 推 移 的 变化 情况 。 选 择 Bar， 吏 居 以 柱 形 
图 显示 当前 浏览 器 使 用 率 。 选 择 Map， 则 以 彩色 地 图 显示 某 地 区 使 用 率 最 高 的 浏览 

GlobalStats 每 天 都 通过 它 遍布 数 百 万 网 站 的 跟踪 代码 来 生成 统计 信息 。 虽然 涉及 的 页 面 量 所 
大 ， 数 据 量 也 非常 大 ， 但 总 归还 是 整个 Web 的 一 小 部 分 。 换 句 话 说 ， 你 不 能 假定 自己 的 网 站 访客 
都 使 用 相同 的 浏览 

更 进一步 ， 浏览 器 装 几 机 份额 还 会 随 用 户 所 在 国家 和 网 站 类 型 而 变化 。 比 如 ,德国 40% 以 上 的 
用 户 使 用 Firefox, 位 居 第 一 。 在 访问 TechCrunch 网 站 ( 计算 机 极 客 最 喜欢 的 新 闻 网 站 ) 的 用 户 中 ， 
使 用 旧版 本 Internet Explorer 的 非常 少 。 所 以 说 ， 要 想 设 计 符 合 自己 用 户 需求 的 网 站 ， 就 必须 以 你 
自己 的 页 面 生成 的 统计 信息 作为 依据 。( 如 果 你 还 没有 在 自己 的 站 点 中 使 用 网 页 跟踪 服务 ， 我 推 

荐 你 使 用 最 好 用 而 日 免费 的 Google Analytics: www.google.com/analytics。 ) 












































1.6.3 ”通过 Modernizr 检 测 功 能 


检测 功能 是 应 对 浏览 需 支 持 差异 的 一 个 重要 策略 。 典 型 的 模式 是 : 加 载 页 面 , 通过 JavaScript 
脚本 检测 某 个 具体 的 功能 是 否 可 用 。 然 后 ， 可 以 对 用 户 给 出 提示 ( 最 衰 的 做 法 ) 平稳 退化 到 没 
那么 花哨 的 版 本 ( 稍 好 一 些 )， 或 者 采用 其 他 方法 实现 浏览 絮 本 该 支持 的 HTML5 功 能 ( 最 佳 )。 
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遗憾 的 是 ， 由 于 HTML5 本 质 上 是 一 个 松散 的 相关 标准 的 集合 ， 因 此 不 可 能 通过 一 次 测试 就 
能 验证 所 有 功能 。 相 反 ， 为 了 检测 不 同 的 功能 ， 必 须 分 别 运行 各 种 不 同 的 测试 一 一 其 至 ， 有 时候 
还 会 测试 浏览 器 是 否 支 持 某 项 功能 的 某 个 部 分 ， 而 测试 速度 会 非常 快 。 

检测 支持 通常 需要 检查 某 个 可 编程 对 象 的 属性 ， 或 者 创建 一 个 对 象 并 以 特定 的 方式 使 用 它 。 
不 过 ,在 按照 这 种 思路 编写 测试 代码 之 前 , 一定 要 三 思 而 行 ; 因为 弄 不 好 ， 可 能 会 非常 麻烦 。 比 
如 ， 由 于 种 种 原因 ， 你 的 测试 代码 在 某 些 浏 览 器 上 总 是 失败 , 或 者 过 不 了 多 久 ， 又 要 重 写 测试 代 
码 。 所 以 ， 我 建议 你 使 用 Modernizr ( www.modernizrcom )， 它 是 一 个 小 巧 的 、 持 续 更 新 的 工具 ， 
专门 用 于 测试 浏览 器 对 很 多 HTML5 及 相关 功能 的 支持 情况 。 如 果 你 想 使 用 新 的 CSS3 功 能 ， 本 书 
6.1.3 节 还 将 介绍 一 个 实现 后 备 文 持 的 绝妙 技巧 。 

在 页 面 上 使 用 Modernizr 的 方法 如 下 。 

(1) 在 浏览 器 中 打开 http:/modernizr.com/download。 

找到 Development version 链 接 ， 这 个 链接 指向 最 新 的 完整 版 Moderniznr。 

(2) 右键 单 击 Development version 链 接 ， 选 择 “ 链 接 另存 为 ”或 “目标 另存 为 ”。 

命令 名 不 一 样 ， 但 功能 一 样 ， 具 体 名 称 取 决 于 浏览 器 。 

(3) 选择 保存 文件 的 目录 ， 单 击 “ 保 存 ”。 

保存 的 JavaScript 文 件 名 为 moderniznr-latest.js。 

(4) 把 下 载 到 的 文件 放 在 你 的 网 页 所 在 的 文件 夹 中 。 

或 者 ， 放 在 一 个 子 文件 夹 中 也 可 以 ， 然 后 修改 引用 该 JavaScript 文 件 的 路 径 。 

(5) 在 页 面 的 chead> 区 块 中 添加 对 这 个 JavaScript 文 件 的 引用 。 

假定 moderniznr-latest.js 文 件 与 你 的 网 页 放 在 同一 文件 夹 中 ， 下 面 就 是 代码 片段 的 示例 : 


<head> 
<meta charset="utf-8"> 
<title>HTML5 Feature Detection</title> 
«script src="modernizr-latest.js"></script> 

































































cjhead， 

这 样 ， 当 页 面 加 载 后 ，Modernizr 脚 本 就 可 以 运行 了 。 它 能 够 在 短 短 的 数 毫 秒 时 间 内 检测 很 
多 新 功能 ， 然 后 创建 一 个 名 叫 Modernizr 的 新 JavaScript 对 象 ， 检 测 结果 就 保存 在 这 个 对 象 里 。 通 
过 检测 这 个 对 象 的 属性 ， 就 可 以 知道 浏览 器 具体 支持 什么 功能 。 























提示 “要 了 解 Modernizr 能 够 检测 的 所 有 功能 ， 以 及 需要 检测 的 JavaScript 对 象 的 所 有 属性 ， 请 参 
考 相 关 文 档 ， 地 址 为 www.modernizr.com/docs。 


(6) 编写 脚本 检测 你 想 使 用 的 功能 ， 然 后 执行 相应 的 操作 。 
例如 ， 要 检测 浏览 器 是 否 支持 HTMLS 的 拖 放 功能 ， 并 将 检测 结果 显示 在 页 面 上 ， 可 以 使 用 
以 下 代码 : 
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<!DOCTYPE htm]> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>HTML5 Feature Detection</title> 
«script src="modernizr-latest.js"></script> 
</head> 


<body> 
<p>The verdict is... <span id="result"></span></p> 


<script> 
// 找到 页 面 中 用 以 显示 结果 的 元 素 (id 为 result) 
var result = document.getElementById("result"); 
if (Modernizr.draganddrop) { 
result.innerHIML = "Rejoice! Your browser supports drag-and-drop."; 
} 
else { 
result.innerHIML = "Your feeble browser doesn't support drag-and-drop."; 
} 
</script> 
</body> 


</html> 
图 1-6 显 示 了 结 










































































A 一 图 1-6: 虽然 这 个 例子 展示 了 检测 功能 的 正确 方法 ， 
《本 eweoeommm 5-3x| 站 二 时 | 但 使 用 功能 的 方式 不 怎么 理想 。 与 其 直接 告诉 你 
Has fens Pescion .+ 着 的 访客 他 们 的 浏览 器 不 支持 这 个 功能 ， 远 远 不 如 
The verdict is... Rejoice! Your browser supports drag-and- 实现 一 个 后 备 方 案 ( 即使 结果 不 如 使 用 HTML5 功 





drop. 能 那么 好 )， 甚 至 不 如 简单 地 忽略 这 个 问题 ( 如 果 
相应 的 功能 只 是 为 了 实现 某 个 装饰 性 的 效果 ， 有 
没有 它 还 不 是 无 所 谓 ) 
































提示 这 个 例子 中 使 用 了 一 种 久负盛名 的 基本 JavaScript 技 术 一 一 根据 ID 查 找 元 素 并 修改 其 内 
容 。 如 果 你 觉得 这 个 例子 不 好 理解 ， 建 议 你 先 看 一 看 附录 B 中 关于 JavaScript 的 入 门 


知识 。 





完整 的 Modernizr 脚 本 体 量 有 点 大 ， 对 于 测试 页 面 是 没有 问题 的 。 但 在 完成 开发 后 ， 应 该 创 
建 一 个 只 包含 待 检测 功能 的 简化 版 Modernizr。 为 此 , 再 次 打开 http://modernizr.com/download 页 面 ， 
但 不 是 点 击 Development version 链 接 ， 而 是 要 选择 复 选 框 。 把 你 想 检 测 的 功能 依次 选中 后 ， 点 击 
GENERATE! 按 钮 ， 就 可 以 生成 定制 的 Modernizr。 再 点 击 DOWNLOAD 按 钮 把 文件 保存 到 本 地 硬 
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盘 即 可 (图 1-7 )。 








到 ModemizrDownloadBuil x \\ 
€ C 


Use the 


CSS3 


国 @font-face 

国 background-size 

国 borderimage 

| borderradius 

国 box-shadow 

国 Flexible Box Model 

(Nexbox) 

| Flexbox Legacy 

| 二 SEN 

国 multiple backgrounds 

国 opacity 

国 rgbal 

国 text-shadow 

国 SS Animations 

| SS Columns 

国 CSS Generated Content 
(before/-after) 

国 CSS Gradients 

国 CSS Reflections 

| CS9 2D Transforms 

| CSS 3D Transforms 

国 CSS Transitions 


HTMLS5S 


国 applicationCache 
Canvas 
Canvas Text 
国 Drag "n Drop 
| hashchange 
| History (pushstrate) 
国 HTML5 Audio 
HTML5 Video 
国 IndexedDB 
| Input Attributes 
Note: does not odd aosses 
国 Input Types 
Note: does not odd dasses 
国 localStorage 
| postMessage 
图 sessionStorage 
| Web Sockets 
| Web SQL Database 
| Web Workers 


p24 GENERATE! 


[v) DOWNLOAD 


y 








DD modernizr.com/download/#-canvas-canvastext-histo 


to develop with and learn from. Then, when you’'re ready for 
production, use the build tool below to pick only the tests you need. 


pb Extensibility Pb Non-core detects 





三 三 医 本 图 1-7， 假设 你 需要 

仿 测 HTML5 画 布 、 画布 
“| 文本 及 HTML5 视 频 功 
能 的 版 本 ， 那 么 检测 其 
他 功能 的 代码 就 不 会 出 
现在 生成 的 Modernizr 文 
件 中 











Misc. 


国 Geolocation API 
国 Inline SVG 

| SMIL 

国 SVG 

面 SVG clip paths 
| Touch Events 

| WebGL 





Extra 


html5shiv v3.6 

图 html5shiv v3.6 w/ 
printshiv 
Modernizrload 

( ) 

国 Media Queries 
Add CSS Classes 


[oS EL 























1.6.4 ”使 用 “腻子 脚本 ? 





外 不 会 帮 你 红 
腻子 脚本 就 是 一 大 堆 五 
词 polyfill 源 自 英国 的 一 种 腻子 粉 ， 
粉 在 美国 叫 spackling paste )。 在 HTML5 中 ， 








额外 的 工作 。 然 后 ， We 





竖 想 变通 方案 时 就 能 用 上 纯粹 的 HTML5。 











填补 功能 缺陷 


Modernizr 可 以 帮 你 找 出 浏览 器 支持 上 的 缺陷 。 它 会 在 某 个 功能 不 可 用 时 提醒 你 ， 
作 补 这 些 缺 陷 。 而 这 正 是 我 们 要 介绍 的 受 子 脚本 ( polyfill ) 的 用 途 所 在 。 从 根本 上 说 ， 
五 花 八 门 的 技术 ， 目 的 就 是 填 平 昌 浏 览 器 对 HTMLS 支 持 上 的 缺陷 。 英 文 单 
We 裂 丝 和 漏洞 的 ( 腻子 


但 除 此 之 


蛙 想 的 腻子 脚本 可 以 直接 放 到 页 面 中 使 用 , 不 必 多 做 
而 且 一 点 都 不 唐 突 ,证 你 在 其 他 人 苦 思 























不 过 , 腻子 脚本 并 不 完美 。 有 些 腻 子 脚本 依赖 的 技术 同样 得 不 到 普遍 支持 。 例 如 , 有 一 个 “用 
子 脚本 ” 瑟 ee Explorer 中 模拟 HTMLS 的 画布 。 而 假如 访客 


不 愿意 安装 Silverlight， 那 你 还 得 考虑 一 


种 后 备 方案 


。 还 有 一 些 腻子 脚本 实现 的 功能 比 HTML5 规 
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定 的 功能 少 一 些 ， 或 者 性 能 上 要 差 一 点 。 

有 时 候 ， 本 书 会 告诉 你 某 个 腻子 脚本 可 以 考虑 。 假 如 你 想 了 解 更 多 的 信息 ， 可 以 在 GitHub 
上 找到 最 相关 的 信息 ， 帮 至 各 种 HIMLS 腻 子 脚本 的 完整 集合 ， 页 面 地 址 为 : http:/tinyurl. 
comy/polyfill。 不 过 我 还 要 提醒 一 句 : 这 些 腻子 脚本 在 品质 、 性 能 和 支持 等 方面 有 着 非常 大 的 差异 。 








提示 “ 光 知 道 针 对 HTMLS 的 某 项 功能 有 一 个 腻子 脚本 还 不 够 。 在 自己 的 网 站 中 实际 地 使 用 它们 
之 前 ， 必 须 先 在 各 种 老 浏 览 器 上 测试 ， 事 先 掌握 它们 的 实际 运行 效果 。 


浏览 器 装机 统计 信息 、 功 能 检测 再 加 上 展 子 脚本 , 在 这 些 方面 做 足 了 功课 之 后 ， 就 可 以 考虑 
怎么 应 用 HTML5 功 能 了 。 下 一 章 ， 我 们 将 迈 出 第 一 步 ， 介 绍 一 些 在 新 、 旧 浏览 器 中 都 能 使 用 的 
HTML5 元 素 。 
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第 2 共 


理 





用 语义 元 素 构 造 网 页 


We 
还 不 是 web 的 变化 有 多 大 ， 而 是 最 古老 的 HTML 元 素 到 今天 依然 被 沿用 着 ! 事实 上 ， 
Web 开 发 人 员 在 构建 现代 网 站 时 使 用 的 HTML 元 素 ， 与 10 年 前 构建 网 站 时 使 用 的 HTML 元 素 别 无 
二 致 。 

有 一 个 元 素 特别 值得 一 提 ， 那 就 是 温和 谦 茶 的 <div> (division， 分 区 ) 元 素 ， 它 堪 称 每 一 个 
现代 网 页 的 柱石 。 利 用 <div> 元 素 ， 可 以 把 整个 HTML 文 档 分 隔 为 页 眉 、 侧 边 面板 、 导 航 条 ， 等 
等 。 再 辅 以 少量 可 靠 的 CSS， 就 可 以 把 这 些 区 块 转换 成 带 边 框 的 盒子 或 带 阴 影 的 分 栏 ， 而 且 各 就 
各 位 。 

这 种 <div> 加 样式 的 技术 既 简明 又 强大 ， 还 非常 灵活 一 一 但 不 够 透明 。 在 查看 别人 的 源 代码 
时 ， 必 须 费 点 劲 才能 知道 哪个 cdiv> 表 示 什 么 ， 而 整个 页 面 又 是 怎么 搭建 起 来 的 。 为 了 理解 页 面 
的 构造 ,不 得 不 在 标记 、 样 式 表 和 浏览 器 显示 的 页 面 之 间 跳 来 转 去 。 特 别 是 在 破解 别人 编写 的 不 
怎么 符合 最 佳 实践 的 页 面 时 ,即便 你 也 在 自己 的 网 站 中 应 用 了 同样 的 设计 技术 , 也 少不了 会 面 对 

这 种 情况 引发 了 人 们 的 思考 。 是 不 是 可 以 用 更 好 的 东西 来 代替 cdiv>? 这 种 东西 需要 发 挥 与 
<div> 一 样 的 作用 ， 但 却 能 传达 出 更 多 的 语义 。 而 且 ， 要 能 够 把 侧 边栏 与 页 眉 分 开 ， 以 及 把 广告 
条 与 菜单 分 开 。HTML5 为 此 引用 了 一 组 构造 页 面 的 新 元 素 ， 实 现 了 Web 开 发 人 员 的 这 一 风 愿 。 

















提示 “如 果 你 的 CSS 技 能 尘封 已 久 ， 和 急需 温 故 知 新 ， 然 后 才能 看 懂 样 式 表 ， 那 说 明 你 还 没 法 学 
习 这 一 章 。 好 在 附录 A 中 包含 一 个 简明 的 CSS 教 程 , 在 那里 可 以 找到 CSS 知 识 的 基本 介绍 。 


2.1 语义 元 素 

要 想 让 网 页 的 结构 更 清晰 ， 需 要 使 用 HTML5 中 新 的 语义 元 素 ( semantic element )。 这 些 元 素 
可 以 为 它们 标注 的 内 容 赋 予 额外 的 含义 。 例如， 新 的 <time> 元 素 用 于 在 网 页 中 标注 一 个 有 效 的 日 
期 或 时 间 。 下 面 就 是 <time> 元 素 最 简单 的 用 例 : 


Registration begins on <time>2014-11-25</time>. 
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这 行 代码 在 网 页 中 呈现 的 结果 如 下 所 示 : 

Registration begins on 2014-11-25. 

最 关键 的 是 要 理解 ，<time> 元 素 没有 任何 内 置 的 样式 。 实 际 上 ， 网 页 的 读者 也 没有 办 法 知道 
有 一 个 额外 的 元 素 包 含 了 日 期 ,你 可 以 使 用 样式 表 为 <ctime> 元 素 添 加 样式 , 但 默认 情况 下 , <timey 
元 素 中 的 文本 与 普通 文本 没有 任何 区 别 。 

设计 <time> 元 素 的 用 意 是 让 它 来 包含 一 小 段 信息 。 不 过 ， 大 多 数 HTML5 语 义 元 素 的 用 途 是 
标识 页 面 中 的 一 个 内 容 区 块 。 比 如 ，<nav> 元 素 用 于 标识 一 组 导航 链接 。 而 <footer> 元 素 用 于 标 
识 通 常 放 在 页 面 底部 的 文 脚 ( 或 页 脚 )。 算 起 来 ， 大概 有 十 几 个 类 似 的 新 元 素 。 














注意 尽 


部 


管 语义 元 素 在 HTML5 的 新 功能 里 不 怎么 起 眼 , 但 它们 的 数量 却 不 少 。 HTML5 新 增 的 大 
分 元 素 都 是 语义 元 素 。 


所 有 语义 元 素 都 有 一 个 显著 的 特点 : 不 真正 做 任何 事 。 相 对 来 说 ，<video> 元 素 则 夺 括 了 在 
页 面 中 充当 视频 播放 器 的 全 部 能 力 〈 参 见 5.2.5T )。 有 读者 可 能 会 问 了 ， 既 然 它 们 不 会 改变 网 页 
的 外 观 ， 那 为 什么 还 要 使 用 这 些 新 元 素 呢 ? 
有 如 下 几 条 理由 。 
口 容易 修改 和 维护 。 解 读 传 统 的 网 页 比较 困难 。 要 想 理解 整体 布局 和 不 同 区 块 的 重要 程度 ， 
必须 得 一 遍 一 遍地 看 网 页 的 样式 表 。 但 通过 使 用 HTML5 的 语义 元 素 ， 通 过 标记 就 可 以 传 
达 出 额外 的 结构 化 信息 。 这 样 ， 等 你 几 个 月 后 再 回头 修改 网 页 ， 就 不 会 像 以 前 那么 头疼 
了 。 当 然 ， 如 果 是 其 他 人 需要 帮 你 改进 页 面 ， 使 用 语义 元 素 就 显得 更 重要 了 。 
口 无 障碍 性 。 现 代 Web 设 计 的 一 个 重要 主题 ， 就 是 让 任何 人 都 能 无 障碍 地 访问 网 页 。 换 句 话 
说 ， 要 让 使 用 屏幕 阅读 器 和 其 他 辅助 工具 的 人 都 能 在 页 面 中 自由 导航 。 兼 容 HTML5 的 无 
障碍 工具 可 以 为 残疾 人 士 提供 更 好 的 上 网 体验 。( 仅 举 一 个 例子 , 有 了 <nav> 元 素 , 屏幕 阅 
读 吉 就 能 够 迅速 返回 导航 区 ， 进 而 找到 网 站 的 链接 。) 
























































提示 要 了 解 针 对 Web 无 障碍 性 的 最 住 实践 ， 可 以 访问 WAI ( Web Accessibility Initiative ，Web 
无 障碍 倡议 ) 的 网 站 : WwWw.w3.0rg/WAI。 或 者 ， 要 了 解 通 过 屏幕 阅读 器 上 网 是 一 种 什么 
样 的 感觉 ( 同时 理解 为 什么 标题 要 排列 适当 )， 可 以 看 看 YouTube 的 这 段 视频 : 
http://tinyurl.com/6bu4pe。 


口 搜索 引擎 优化 。 像 谷歌 这 样 的 搜索 引擎 ， 会 使 用 强大 的 搜索 机 器 人 ( search bot )， 这 些 搜 
索 机 絮 人 自动 在 Web 中 爬行 并 获取 每 一 个 网 页 ,然后 扫描 网 页 内 容 并 将 它们 索引 到 搜索 数 
据 库 中 。 如 有 果 谷 歌 能 够 更 好 地 理解 你 的 站 点 ， 那 搜索 者 的 查询 就 会 越 容易 与 你 的 内 容 匹 
配 , 因而 你 的 网 站 列 在 搜索 结果 中 的 可 能 性 也 就 越 大 .搜索 机 器 人 已 经 在 检查 一 些 HITML5 
的 语义 元 素 了 ， 这 样 可 以 收集 到 它们 索引 的 页 面 的 更 多 信息 。 











全 
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口 未 来 的 功能 。 新 浏览 器 和 Web 编 辑 工具 一 定 会 利用 语义 元 素 。 比 如 , 浏览 器 可 以 提供 一 个 
页 面 的 内 容 纲 要 ， 以 方便 访客 跳 转 到 页 面 中 适当 的 区 块 。( 事实 上 ，Chrome 已 经 提供 了 一 
个 显示 页 面 纲 要 的 插件 ， 详 见 2.5.1 季 。) 类 似 地 ， 网 页 设计 工具 也 能 包含 一 些 方便 你 构建 
或 编辑 导航 菜单 的 功能 ， 而 方法 就 是 组 织 你 放 在 cnav> 区 块 中 的 内 容 。 
最 关键 的 问题 在 于 ， 如 果 你 正确 地 使 用 了 语义 元 素 ， 就 能 够 创建 更 加 清晰 的 页 面 结构 ， 就 能 
够 适应 未 来 的 浏览 器 和 Web 设 计 工 具 的 发 展 趋势 。 而 如 有 果 你 还 是 抱 着 原来 写 HTML 标 记 的 老 习 惯 
不 放 ， 那 就 要 跟 未 来 擦 肩 而 过 了 。 


2.2 ”改造 传统 的 HTML 页 面 


要 了 解 和 熟悉 新 的 语义 元 素 (包括 学 习 如 何 使 用 它们 来 构造 页 面 )， 最 好 的 方式 莫 过 于 拿 一 
个 经 典 的 HTML 文 档 作 例子 ， 然 后 把 HTML5 的 一 些 新 鲜 营养 充实 进去 。 图 2-1 是 我 们 要 改造 的 第 
一 个 页 面 。 这 个 页 面 很 简单 ， 只 包含 一 篇 文章 ， 当 然 对 于 其 他 内 容 ( 如 博客 、 产 品 说 明 或 简短 的 
新 闻 报道 ) 也 完全 没有 问题 。 




















提示 访问 http://prosetech.com/html5， 可 以 查看 或 下 载 图 2-1 中 的 示例 页 面 以 及 本 章 所 有 的 示例 
页 面 。 如 果 你 想 从 头 开始 做 ， 那 就 选择 ApocalypsePage Original.html， 如 果 想 直接 查看 使 
用 HTML5 改 造 之 后 的 结果 ， 请 选择 ApocalypsePage Revised.html。 


2.2.1 构造 页 面 的 老 办 法 


要 生成 图 2-1 所 示 的 页 面 , 有 很 多 种 构造 方法 。 让 人 高 兴 的 是 , 这 个 示例 页 面 使 用 的 是 HTML 
最 佳 实践 , 因此 没有 任何 通过 标记 来 进行 格式 化 的 痕迹 。 没有 粗 体 或 斜体 元 素 , 没有 上 骨 入 的 样式 ， 
当然 更 没有 土 得 掉 漆 的 <font> 之 类 的 东西 。 总 之 , 这 是 一 个 格式 非常 规范 的 页 面 ， 所 有 样式 均 来 
自 外 部 样式 表 。 
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页 丑 一 级 标题 图 2-1 : 一 个 普通 的 HTML 
ig 页 面 , 具有 类 似 文档 的 页 
| 天 ApocaypsePage Original htm| D ~ > x | @ Apocalypse Now x 分 交加 面 结构 ， 其 中 的 格式 来 自 
| 一 个 外 部 样式 表 





























How the World Could End 


导语 一 一 RIGHT NOW, you're probably feeling pretty good. After all, life in the 
developed world is comfortable 一 probably more comfortable than it's 
been forthe average human being throughout all of recorded history. 


But don't get too smug. There's still plenty of horrific ways it could all fall 
apart. In this article, youll learn about a few of our favorites. 


二 级 标题 全 Mayan Doomsday 

Skeptics suggest that the Mayan calendar simply rolls to a new 5,126-year 
era after 2012, and doesn't actually predict a life-ending apocalypse. But | 
given that the long-dead Mayans were wrong about virtually everything | 
else, why should we trust them on this? 号 


Robot Takeover | 
Not quite as frighteningas a Vampire Takeover or Living-Dead Takeover, a | 
robot rebellion is still a disquieting thought. We are already outnumbered 
hb Sk 1 even BM f 


omical ll Gatesf thed 


Global Epidemic 

Some time in the future, a lethal virus could strike. Predictions differ about | 
the source of the disease, but candidates include monkeys in the African 

jungle, bioterrorists, birds and pigs with the flu, warriors from the future, 

an alien race, hospitals that use too many antibiotics, vampires, the CIA, 

and unwashed brussel sprouts. Whatever the source, it's clearly bad news. 


页 脚 一 ese apocshpric predictions do not reflect the views of the author 
About Us Disclaimer Contact Us 


Copyright © 2014 | 






































以 下 是 从 页 面 中 摘出 的 一 段 标记 ， 代 码 中 加 粗 的 地 方 表明 应 用 了 样式 : 


<div class="Header"> 
<h1>How the World Could End</h1> 
<p class="Teaser">Scenarios that spell the end of life as we know it</p> 
<p class="Byline">by Ray N. Carnation</p> 
</div> 


<div class="Content"> 
<p><span class="LeadIn">Right now</span>, you're probably ...</p> 
<p>...</p> 


<h2>Mayan Doomsday</h2> 
<p>Skeptics suggest ...</p> 


</div> 


<div class="Footer"> 
<p class="Disclaimer">These apocalyptic predictions ...</p> 
<p> 
<a href="AboutUs.html">About Us</a> 
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</p> 
<p>Copyright © 2014</p> 
</div> 


代码 中 的 省 略 号 是 怎么 回 事 

本 书 不 可 能 把 每 个 示例 的 所 有 标记 都 印 出 来 ， 除 非 把 它 扩 充 到 12 000 页 ， 再 毁 掉 一 片 成 材 
林 。 不 过 ,这 些 代 码 能 够 展示 出 页 面 的 基本 结构 ， 以 及 所 有 重要 的 元 素 。 为 此 ,代码 中 使 用 了 
省 略 号 (... )， 用 以 表示 省 略 未 印刷 出 来 的 内 容 。 

例如 ， 就 拿 这 段 代码 来 说 ， 其 中 包含 了 图 2-2 所 示 页 面 主体 中 的 所 有 内 容 ， 只 不 过 省 略 了 
一 些 包含 文字 的 段落 、Manyan Doomsday 后 面 的 条 目 以 及 页 脚 中 的 一 些 链接 。 如 果 你 想 仔 细 观 
察 页 面 中 的 每 一 处 细节 ， 当 然 没 有 问题 ， 就 在 本 书 试验 站 点 ( http://prosetech.com/html5 ) 查看 
示例 文件 即 可 。 


在 一 个 ( 像 这 个 一 样 的 ) 编写 规范 的 传统 HTML 页 面 中 , 通过 使 用 cdiv> 和 <span> 元 素 , 已 经 
把 大 部 分 工作 移交 给 了 样式 表 。 通 过 <span> 可 以 为 处 在 其 他 元 素 中 的 少量 文本 添加 样式 ， 而 通过 
<div> 不 仅 可 以 为 整个 内 容 区 块 添加 样式 ， 还 可 以 构建 起 整个 页 面 的 结构 ( 见 图 2-2 )。 














= / eel 图 2-2: 通过 <div> 元 素 把 
=) Apocalypsepage Originalhtml P - 3 X | @ Apocalypse Now x 个 于 文昌 于 eh = 
yo 页 面 分 隔 为 三 个 逻辑 区 


How the World Could End 块 : 顶部 的 页 看 、 中 部 的 
内 容 和 底部 的 页 脚 























RIGHT NOW, you're probably feeling pretty good. After all life in the 
developed world is comfortable 一 probably more comfortable than it's 
been for the average human being throughout all of recorded history. 


But don't get too smug,. There's still plenty of horrific ways it could all fall 
apart In this article, you]l learn about a few of our favorites. 


Mayan Doomsday 
Skeptics suggest that the Mayan calendar simply rolls to a new 5,126-year 


era after 2012, and doesn't actually predict a life-ending apocalypse. But 
given that the long-dead Mayans were wrong about virtually everything 
else, why should we trust them on this? 


Robot Takeover 
Not quite as frightening as a Vampire Takeover or Living Dead Takeover, a 


robot rebellion is still a disquieting thought. We are already outnumbered 
t 1 ep (Gates the davt 





Global Epidemic 

Some time in the future, a lethal virus could strike, Predictions differ about 
the source of the disease, but candidates include monkeys in the African 
jungle, bioterrorists, birds and pigs with the flu, warriors from the future, 
an alien race, hospitals that use too many antibiotics, vampires, the CIA, 
and unwashed brussel sprouts, Whatever the source, it's clearly bad news. 





These apocalyptic predlictions do not reflect the views of the author. 
About 
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这 个 例子 中 的 样式 表 比 较 简单 。 整 个 页 面 的 最 大 宽度 设置 为 800 像 素 ， 避 免 文 本 在 宽屏 显示 
器 上 显示 得 过 长 。 页 丑 位 于 一 个 带 蓝 色 边 框 的 盒子 中 , 内 容 区 的 两 侧 都 添加 了 内 边 距 ， 而 页 脚 在 
整个 页 面 底部 居中 。 

因为 使 用 了 <div> 元 素 ， 所 以 添加 样式 很 容易 。 比 如 ， 样 式 表 ApocalypsePage_Original.css 使 
用 下 列 规 则 为 页 眉 及 其 中 内 容 添 加 样式 。 


/* 为 <div> 添 加 样式 ,使 其 具有 页 眉 的 外 观 ( 蓝 色 带 边框 ) */ 
.Header { 

background-color: #7695FE; 

border: thin #336699 solid; 

padding: 10px; 

margin: 10px; 

text-align: center; 


} 


/# 为 页 局 中 的 <h1> 添 加 样式 (这 是 文章 的 标题 ) */ 
.Header h1 { 

margin: Opx; 

color: white; 

font-size: xx-large; 


} 


/* 为 页 届 中 的 子 标题 添加 样式 */ 
.Header .Teaser { 

margin: Opx; 

font-weight: bold; 
} 


/* 为 页 届 中 的 署名 行 添加 样式 */ 
.Header .Byline { 
font-style: italic; 
font-size: small; 
margin: Opx; 

















你 可 能 注意 到 了 ,这 些 规则 有 效 利用 了 上 下 文选 择 符 ( 见 A.3.3 节 )。 比 如 ,用 选择 符 .Header 
hi 选择 了 页 眉 区 域 中 的 所 有 <h1> 元 素 。 


提示 “附录 A 在 介绍 CSS 时 也 用 到 了 这 个 例子 。 如 果 你 想 知 道 应 用 给 这 个 页 面 的 所 有 样式 规则 ， 
可 以 翻 到 A.4 节 。 


2.2.2 ”使 用 HTML5 构造 页 面 


<div> 目 前 依旧 是 Web 设 计 的 必 备 元 素 , 它 是 一 个 直观 、 多 用 途 的 容器 , 可 以 通过 它 为 页 面 中 
的 任何 区 块 应 用 样式 。 但 <div> 的 问题 在 于 ， 它 本 身 不 反映 与 页 面相 关 的 任何 信息 。 在 你 (或 浏 
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览 锅 、 设 计 工 具 、 屏 幕 阅 读 句 、 搜 索 机 器 人 ) 遇 到 一 个 cdiv> 元 素 时 ， 你 知道 它 是 页 面 中 独立 的 
一 个 区 块 ， 可 是 你 不 知道 那个 区 块 的 意图 。 

要 通过 HTML5 改 进 这 种 情况 ， 可 以 把 cdiv> 替 换 成 更 具有 描述 性 的 语义 元 素 。 这 些 语义 元 素 
的 行为 与 <div> 元 素 类 似 : 它们 仪 包含 一 组 标记 ， 除 此 之 外 没有 其 他 作用 ， 可 以 将 它 作 为 “格式 
挂钩 ”来 为 页 面 应 用 样式 。 不 过 ， 除 此 之 外 ， 它 们 还 会 为 页 面 添 加 一 点 语义 。 

下 面 的 代码 是 在 图 2-1 所 示 页 面 基础 进行 了 简单 修改 之 后 的 结果 ， 删 除了 两 个 cdiv> 元 素 ， 但 
添加 了 两 个 HTML5 的 语义 元 素 : <header> 和 <footer>。 


<header class="Header"> 
<h1>How the World Could End</h1> 
<p class="Teaser">Scenarios that spell the end of life as we know it</p> 
<p class="Byline">by Ray N. Carnation</p> 

</header> 














<div class="Content"> 
<p><span class="LeadIn">Right now</span>, you're probably ...</p> 
<p>...</p> 


<h2>Mayan Doomsday</h2> 
<p>Skeptics suggest ...</p> 


</div> 
<footer class="Footer"> 
<p class="Disclaimer">These apocalyptic predictions ...</p> 
<p> 
<a href="AboutUs.html">About Us</a> 
</p> 
<p>Copyright © 2014</p> 
</footer> 


在 这 里 ，<header> 和 <footer> 元 素 蔡 代 了 原来 的 <div> 元 素 。 如 果 你 在 修改 一 个 大 型 网 站 ， 可 
以 考虑 用 HTML5 中 相应 的 语义 元 素来 包装 已 有 的 <div> 元 素 。 

可 能 你 已 经 注意 到 了 ， 这 个 例子 里 的 <header> 和 <footer> 元 素 仍 然 使 用 了 类 名 。 这 样 做 的 目 
的 就 是 不 用 修改 原来 的 样式 表 。 由 于 类 名 不 变 ， 所 以 原来 应 用 到 <div> 元 素 的 样式 规则 ， 可 以 应 
用 给 现在 的 cheader> 和 <footer> 元 素 。 

` 管 怎么 说 ， 这 里 的 类 名 还 是 有 点 多 余 。 如 果 你 想 把 它们 都 删 掉 ， 变 成 这 样 : 
<header> 

<h1>How the World Could End</h1> 

<p class="Teaser">Scenarios that spell the end of life as we know it</p> 


<p class="Byline">by Ray N. Carnation</p> 
</header> 


那 就 得 修改 样式 表 规 则 ， 直 接 通过 元 素 名 来 应 用 样式 。 对 于 当前 页 面 ， 这 样 做 没有 问题 ， 因 为 其 
中 只 有 一 个 <header> 和 一 个 <footer> 元 素 。 
下 面 是 修改 之 后 的 为 cheader> 及 其 包含 的 所 有 元 素 应 用 样式 的 规则 : 
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/# 为 <header> 添 加 样式 ， 使 其 具有 页 届 的 外 观 ( 蓝 色 带 边 框 ) */ 
header { 


} 

/* 为 <header> 中 的 <h1> 添 加 样式 (这 是 文章 的 标题 ) */ 
header h1 { 

} 


/# 为 <header> 中 的 子 标题 添加 样式 */ 
header .Teaser { 


% 


/# 为 <header> 中 的 署名 行 添加 样式 */ 

header .Byline { 

} 

这 两 种 应 用 样式 的 方式 会 得 到 相同 的 结果 。 正 如 HTML5 中 的 很 多 设计 问题 一 样 ， 可 能 需要 
充分 地 讨论 ， 但 到 底 该 怎么 做 ,没有 硬性 规定 。 

此 时 ， 也 许 你 会 问 : 为 什么 内 容 部 分 的 <div> 元 素 还 保留 着 呢 ? 这 样 没 有 问题 ， 因 为 HTML5 
页 面 经 常会 混合 各 种 语义 元 素 和 更 通用 的 cdiv> 容 器。HTML5 没 有 “content” 元 素 ， 所 以 仍然 可 
以 使 用 cdiv> 元 素 。 


注意 这 个 网 页 在 IE9 之 前 的 Internet Explorer 中 无 法 正确 显示 。 为 解决 这 个 问题 ， 可 以 参考 2.3 
节 的 有 关 讨 论 。 不 过 接 下 来 ， 还 是 让 我 们 再 多 接触 几 个 能 够 增强 页 面 的 语义 元 素 吧 。 





最 后 , 还 有 一 个 元 素 有 必要 用 在 示例 页 面 中 。 那 就 是 HTML5 的 <article> 元 素 ,， 这 个 元 素 表示 
一 个 完整 的 、 自 成 一 体 的 内 容 块 ， 比 如 博客 文章 或 新 闻 报 道 。<article> 元 素 应 该 包含 所 有 相关 的 
内 容 ， 包 括 标题 、 作 者 署名 以 及 正文 。 添 加 了 xarticle> 元 素 之 后 的 页 面 结构 就 变 成 如 下 所 示 : 

<article> 


<header> 
<h1>How the World Could End</h1> 








</header> 

<div class="Content"> 
<p><span class="LeadIn">Right now</span>, you're probably ...</p> 
<p>...</p> 
<h2>Mayan Doomsday</h2> 
<p>Skeptics suggest ...</p> 

</div> 

</article> 
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<footer> 
<p class="Disclaimer">These apocalyptic predictions ...</p> 


</footer> 


图 2-3 是 最 终 的 页 面 结构 示意 图 。 
































Web Page 和 92-3; 重新 设计 之 后 ， 页面 中 使 用 了 三 个 新 的 HTML5 语 义 元 素 。 
对 于 原来 的 页 面 结构 ， 我 们 可 以 理解 为 :“ 这 是 一 个 包含 三 个 区 
Zartide> 块 的 页 面 。” 而 对 于 新 的 页 面 结构 ， 可 以 这 样 想 :“ 这 是 一 篇 包含 


0 


尽管 此 时 的 页 面 在 浏览 器 中 看 起 来 还 是 一 样 的 ， 但 后 台 已 经 潜伏 了 一 些 额 外 的 信息 。 此 
时 ， 如 果 正 好 一 个 搜索 机 器 人 造访 你 的 网 站 ， 停 留 在 这 个 页 面 上 ， 那 它 就 能 迅速 找到 页 面 的 
内 容 (通过 <article> 元 素 ) 以 及 该 内 容 的 标题 (通过 <header> 元 素 )。 至 于 页 脚 ， 它 就 不 会 太 
在 意 了 。 


















































注意 ， 有 时 候 ， 需 要 把 一 篇 文章 拆 开 ， 分 几 个 页 面 来 显示 。 目 前 关于 这 个 问题 的 处 理 方案 ， 就 
是 把 文章 的 每 一 部 分 都 放 在 它 自己 的 <article> 元 素 中 一 一 即使 内 容 并 不 完整 ， 也 不 是 自 
成 一 体 的。 在 实际 使 用 语义 元 素 的 时 候 ， 语 义 元 素 与 页 面 表现 之 间 经 常会 发 生 冲 突 ， 这 
只 是 一 个 典型 的 例子 。 


2.2.3 用 <figure> 添 加 插图 


很 多 页 面 中 都 包含 图 片 。 但 是 ， 插 图 (figure ) 与 图 片 的 概念 还 不 完全 一 样 。HTML5 规 范 建 
议 我 们 把 插图 想象 成 一 本 书 中 的 附 图 ; 换 名 话说， 插图 虽然 独立 于 文本 ， 但 文本 中 会 提 到 它 。 
一 般 来 说 ， 搬 图 应 该 是 浮动 的 ; 换 名 话说， 应 该 把 它 放 在 相关 文本 旁边 的 一 个 比较 近 便 
的 位 置 上 ， 而 不 要 把 它们 锁定 在 特定 的 词 或 元 素 旁 边 。 而 且 ， 捕 图 通常 还 会 有 与 之 相伴 的 序 
动 图 题 。 

下 面 是 给 这 篇 启示 录 般 的 文章 添加 插图 的 HTML 标 记 。 其 中 也 包含 正好 在 它 前 面 和 后 面 的 两 
个 段落 ， 这 样 你 就 能 知道 插图 在 标记 中 的 确切 位 置 了 。 


<p><span class="LeadIn">Right now</span>, you're probably ...</p> 
<div class="FloatFigure"> 









































<img src="human_ skull.jpg" alt="Human skull"> 























38 | 第 2 章 用 语义 元 素 构 造 网 页 





<p>Will you be the last person standing if one of these apocalyptic 


scenarios plays out?</p> 


</div> 


<p>But don't get too smug ...</p> 
光 有 这 些 标记 还 不 行 ， 必须 还 得 有 相应 的 样式 表 规则 ,才能 把 插图 定位 到 适当 的 位 置 ( 同时 2 
添加 外 边 距 、 控 制图 题 文本 的 格式 ， 当 然 你 也 可 以 自己 给 它 添加 一 个 边框 )。 下 面 就 是 本 书 给 出 


的 样式 规则 : 


/# 为 插图 应 用 样式 */ 
.FloatFigure { 
float: left; 
margin-left: Opx; 
margin-top: Opx; 
margin-right: 20px; 
margin-bottom: Opx; 


} 


/* 为 图 题 应 用 样式 */ 

.FloatFigure p { 
max-width: 200px; 
font-size: small; 
font-style: italic; 
margin-bottom: 5px; 


} 





图 2-4 展 示 了 目前 这 个 示例 页 面 的 外 观 。 
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2-4: 现在 ， 我 们 通过 插图 美 
化 了 文本 。 在 标记 中 ,插图 恰好 


加 











Will you be the Iast person standing 
if one of these apocalyptic scenarios 
plays out? 















How the World Could End 


RIGHT NOW, you're probably feeling pretty good. After all, life in the developed world 
is comfortable—probably more comfortable than it's been for the average human being 
throughout all of recorded history. 


But don't get too smug. There's still 
plenty of horrific ways it could all fall 
apart. In this article, you'll learn about a 
few of our favorites. 


Mayan Doomsday 

Skeptics suggest that the Mayan calendar 
simply rolls to a new 5,126-year era after 
2012, and doesn't actually predict a life- 
ending apocalypse. But given that the 
long-dead Mayans were wrong about 
virtually everything else, why should we 
trust them on this? 


Robot Takeover 


Not quite as frightening as a Vampire 
Takeover or Living-Dead Takeover, a 


robot rebellion is still a disquieting thought. We are already outnumbered by our 
technological gadgets, and even Bill Gates fears the day his Japanese robot slave turns 











在 第 一 段 文本 之 后 , 因此 它 会 浮 
动 到 后 面 文本 的 左 侧 。 注意 一 下 
题 文本 的 宽度 , 我 们 通过 限制 
这 个 宽度 , 让 图 题 内 容 显示 很 充 
实 、 很 优雅 
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如 果 你 以 前 也 是 这 样 为 内 容 添加 插图 的 ， 那 在 听 说 HTML5 专 门 为 你 量 身 打造 了 一 个 新 的 语 
义 元 素 ， 一 定 会 高 兴 得 合 不 拢 嘴 。 没 错 ， 在 这 里 可 以 不 再 用 那个 乏味 的 <div> 了 ， 因 为 现在 有 了 
一 个 专门 的 <figure> 元 素 。 那 么 图 题 呢 ? 图 题 可 以 放 在 <figure> 中 的 <figcaption> 元 素 里 : 


<figure class="FloatFigure"> 
<img src="human_ skull.jpg" alt="Human skull"> 
<figcaption>Will] you be the last person standing if one of these 
apocalyptic scenarios plays out?</figcaption> 

</figure> 


当然 ,给 插图 和 图 题 应 用 什么 样式 ， 把 它们 放 在 什么 位 置 上 , 还 是 由 你 说 了 算 。 对 这 个 例子 
来 说 ， 你 得 修改 样式 规则 的 选择 符 ， 才 能 重新 选中 图 题 文 本 。 现 在 使 用 的 是 .FloatFigure p， 而 
修改 之 后 应 该 是 .FloatFigure figcaption。 


提示 在 这 个 例子 中 ，<figure> 元 素 由 于 有 一 个 类 名 ( FloatFigure )， 所 以 仍然 会 被 应 用 样式 ， 
这 与 元 素 名 无 关 。 使 用 类 名 是 因为 我 们 要 为 不 同 的 播 图 应 用 不 同 的 样式 。 比 如 ， 可 以 让 
有 的 插图 靠 左 浮动 ， 而 让 有 的 插图 靠 右 浮动 ， 有 的 插图 还 要 应 用 不 同 的 外 边 距 或 图 题 格 
式 ， 等 等 。 为 了 保留 这 种 灵活 性 ， 还 是 有 必要 继续 通过 类 来 为 插图 应 用 样式 。 











打开 浏览 器 看 一 下 ,插图 还 是 那样 。 但 不 同 的 是 标注 插图 的 标记 现在 的 含义 已 经 非常 明确 了 。 
(顺便 提 个 醒 ， xfigcaption> 元 素 不 是 只 能 包含 文本 一 一 任何 HTML 元 素 都 可 以 ， 比 如 链接 、 小 图 
标 等 。) 
最 后 ， 有 必要 再 说 一 件 事 。 因 为 图 题 中 经 常 就 包含 了 对 图 片 的 完整 说 明 ， 所 以 alt 文 本 就 显 
得 有 点 多 余 了 。 这 种 情况 下 ， 可 以 把 cimg> 元 素 中 的 a1t 属 性 删除 : 
<figure class="FloatFigure"> 
<img src="human_skull.jpg"> 


<figcaption>A human skull lies on the sand</figcaption> 
</figure> 


这 里 要 小 心 的 是 , 不 能 把 alt 文 本 设 成 空 字符 串 。 因 为 这 就 意味 着 你 的 图 片 纯粹 是 装饰 用 的 ， 
恒 幕 阅读 器 会 忽略 不 读 。 






































2.2.4 用 <aside> 添 加 附注 


新 的 caside> 元 素 表示 与 它 周围 的 文本 没有 密切 关系 的 内 容 。 这 就 是 说 ,你 可 以 像 在 印刷 品 
中 使 用 附注 栏 一 样 使 用 <aside> 元 素 ， 可 以 通过 它 介 绍 另 一 个 相关 的 话题 ， 或 者 对 主 文档 中 提出 
的 某 个 观点 进行 解释 。( 比如 ， 可 以 直接 翻 到 本 节 末 尾 的 附注 栏 。) 另外 ， 也 可 以 用 <aside> 来 盛 
放 广 告 、 相 关内 容 链接 ， 甚 至 如 图 2-5 所 示 的 醒目 引文 ( pull quote )。 
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图 2-5: 醒目 引文 也 是 从 
印刷 行业 中 借用 的 技 
术 ， 用 于 吸引 读者 注意 
力 ， 突 出 重要 的 内 容 







































一 小 ES)] ApocalypsePage Revised.html ~ Xx | EApocalypse Now x | | in) 
a robot rebellion is still a disquieting thought. We are already EY 
outnumbered by our technological gadgets, and even Bill Gates fears the 
day his Japanese robot slave turns him over by the ankles and asks [in a 
suitably robotic voice) "Who's your daddy now?" 

















Unexplained Singularity 


We don't know how the 6 6 We don 东 know 


universe started, so we 


can't be sure it won't just how the universe 


end, maybe today, and 
maybe with nothing more SLG rled, SO we can y be 


exciting than a puff of anti- 


matter and a slight fizzing Sure 1t won ‘tjust end 
六 | 


noise. 


Runaway Climate Change maybe today. 9 9 


Dismissed by some, Al 
Gore's prophecy of doom | 
may still come true. Ifit does, we may have to contend with vicious 

storms, widespread food shortages, and surly air conditioning repairmen. 





Global Epidemic 
Some time in the future, a lethal virus could strike. Predictions differ 









































当然 ,使 用 熟悉 的 cdiv> 元 素 也 可 以 创造 这 种 效果 ,但 用 <aside> 元 素 包装 同样 的 内 容 ， 可 以 
让 标记 更 富有 意义 : 
<p>... (in a suitably robotic voice) "Who's your daddy now?"</p> 


<aside class="PullQuote"> 
<img src="quotes start.png" alt="Quote"> 
We don't know how the universe started, so we can't be sure it won't 
just end, maybe today. 
<img src="quotes end.png" alt="End quote"> 
</aside> 


<h2>Unexplained Singularity</h2> 
这 一 次 ， 样 式 表 把 醒目 引文 浮动 到 了 右边 。 为 满足 你 的 好 奇 心 ， 下 面 给 出 了 相应 的 样式 : 


.PullQuote { 
float: right; 
max-width: 300px; 
border-top: thin black solid; 
border-bottom: thick black solid; 
font-size: 30px; 
line-height: 130%; 
font-style: italic; 
padding-top: 5px; 
padding-bottom: 5px; 
margin-left: 15px; 
margin-bottom: 10px; 
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.PullQuote img { 
vertical-align: bottom; 


} 


语义 元 素 是 怎么 来 的 

在 发 明 HTML5 之 前 ， 其 发 明 者 花 了 很 长 时 间 研 究 已 有 的 网 页 。 他 们 不 是 光 浏 览 自己 喜欢 
看 的 站 点 ， 还 研读 了 谷歌 对 十 亿 个 网 页 的 统计 信息 。( 如 果 你 对 这 个 出 色 的 研究 感 兴趣 ， 可 以 
看 看 这 里 : https://developers.google.com/webmasters/state-of-the-web/。) 

谷歌 公布 的 这 个 调查 分 析 并 列 出 了 Web 作 者 在 自己 网 页 中 使 用 的 类 名 。 谷歌 的 目的 是 想 告 
诉 大 家 ,你 们 使 用 的 类 名 可 能 与 匹配 的 元 素 的 用 途 相悖 ,从 而 为 大 家 构造 网 页 提供 有 价值 的 参 
考 。 比 如 ， 要 是 所 有 人 都 给 一 个 <div> 元 素 指定 名 为 header 的 类 ， 那 么 就 可 以 推断 出 大 家 都 把 
页 眉 内 容 放 在 网 页 的 顶部 。 

谷歌 发 现 的 最 重要 的 一 个 现象 , 就 是 大 量 的 网 页 根本 不 使 用 类 名 ( 其 至 连 样式 表 都 没有 )。 
然后 ， 他 们 汇编 了 一 组 最 常用 的 类 名 ， 包 括 footer、header、title、menu、nav， 分别 对 应 着 
HTMIL5 中 的 <footer>、<header>、<nav> 等 新 语义 元 素 。 另 外 一 些 由 其 他 人 建议 但 尚未 创造 出 
来 的 语义 元 素 有 search 和 copyright 等 。 

换 向 话说 , Web 页 面 拥有 一 些 共 性 的 东西 ,比如 页 面 都 有 页 眉 、 页 脚 、 侧 边栏 和 导航 菜单 。 
只 不 过 大 家 在 区 分 这 些 构 造 时 采用 的 方式 多 多 少 少 有 点 不 一 致 。 基于 这 个 认识 , 从 人 们 普遍 的 
做 法 中 提取 出 相应 的 语义 ， 据 以 为 HTML 语言 添 加 一 些 新 元 素 ， 也 就 成 了 自然 而 然 的 事 了 。 这 
就 是 HTML5 中 语义 元 素 的 来 历 。 


2.3 浏览 器 对 语义 元 素 的 支持 情况 


到 目前 为 止 , 我 们 做 练习 做 得 还 是 很 开心 的 。 不 过 , 这 个 结构 良好 的 页 面 如 果 在 旧版 本 浏览 
器 里 没 法 看 ， 那 用 处 可 就 不 大 了 。 

所 幸 的 是 ，HTML5 的 这 些 语义 元 素 已 经 基本 得 到 了 所 有 现代 浏览 器 的 支持 。 就 算 你 想 找 到 
一 个 不 支持 它们 的 Chrome 、Firefox 、Safari 或 Opera 的 版 本 ， 都 不 太 可 能 。 最 大 的 绊脚石 还 是 下 9 
之 前 的 Internet Explorer， 包 括 仍 然 占 很 大 比例 的 正 8。 

幸运 的 是 ， 语 义 元 素 还 是 一 个 比较 容易 弥补 的 功能 。 毕 竟 ， 语 义 元 素 本 身 什 么 也 不 做 ， 要 
支持 它们 ， 只 要 让 浏览 器 把 它们 当做 普通 的 cdiv> 元 素 就 行 了 。 为 此 ， 我们 要 做 的 就 是 像 接 下 来 
几 节 所 说 的 ， 为 它们 添加 点 样式 规则 。 之 后 就 可 以 得 到 超级 可 靠 的 语义 元 素 ， 即 使 用 10 年 前 的 
老 古 董 浏 览 器 来 看 ， 也 不 是 问题 了 。 












































注意 ”如果 你 使 用 了 Modernizr ( 见 1.6.7 节 )， 那 你 的 页 面 会 自动 完成 语义 元 素 的 修补 工作 。 那 么 
接 下 来 几 节 的 内 容 你 就 可 以 不 看 了 。 如 果 你 没有 使 用 Modernizr， 或 者 你 很 想 知道 怎么 完 
成 修补 工作 ， 那 请 继续 阅读 。 
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2.3.1 为 语义 元 素 添 加 样式 


浏览 需 在 遇 到 不 认识 的 元 素 时 ， 会 把 它们 当成 内 联 (inline ) 元 素 。 大 多 数 HTML5 语 义 元 素 
(包括 本 章 已 经 介绍 的 这 些 ， 但 除 ctime> 之 外 ) 都 是 块 级 元 素 ， 也 就 是 需要 在 单独 一 行 上 来 呈现 
它们 ， 同 时 在 它们 与 前 后 元 素 之 间 各 添加 一 些 空间 。 

不 认识 HTML5 语 义 元 素 的 浏览 器 不 知道 应 该 把 它们 显示 为 块 级 元 素 ， 所 以 很 可 能 会 把 它们 
都 挤 到 一 起 。 为 解决 这 个 问题 ， 只 要 在 样式 表 中 添加 一 条 “超级 规则 ” 即 可 。 下 面 就 是 一 条 为 9 
个 HTML5 元 素 应 用 块 级 显示 格式 的 规则 : 


article, aside, figure, figcaption, footer, header, main, nav, section, 
summary { 
display: block; 






































这 条 规则 对 于 能 够 识别 HTML5 元 素 的 浏览 器 没有 作用 ， 因 为 它们 的 display 属 性 已 经 被 默认 
设 成 了 plock。 而 且 这 条 规则 也 不 影响 我 们 已 经 为 这 些 元 素 应 用 的 样式 。 那 些 样式 照样 可 以 添加 
到 它们 身上。 


2.3.2 ”使 用 HTML5“ 垫 片 ” 


对 于 大 多 数 浏览 器 而 言 ， 上 一 节 介 绍 的 技术 可 以 解决 兼容 问题 。 但 这 里 的 “大 多 数 ” 并 不 包 
括 IE8 及 更 早 的 版 本 。 换 句 话 说， 对 于 较 早 版 本 的 了 下， 还 要 面临 一 个 挑战 : 它们 会 拒绝 给 无 法 识 
别 的 元 素 应 用 样式 。 好 在 ， 有 一 个 变通 方案 : 通过 JavaScript 创 建新 元 素 ， 就 可 以 骗 过 IE, 证 它 识 
别 外 来 元 素 。 比 如 ， 下 面 的 脚本 可 以 让 IE 识别 并 为 cheader> 元 素 应 用 样式 : 


<script> 
document.createElement('header') 
</script> 


实际 上 , 你 不 用 自己 亲手 写 这 些 代码 ， 因 为 已 经 有 人 为 你 写 好 了 ， 只 要 拿 过 来 用 就 可 以 了 。 
要 使 用 这 个 脚本 ， 只 要 在 页 面 的 <head> 区 块 中 引用 它 即 可 ， 就 像 这 样 : 


<head> 
<title>...</title> 
<script src="http://htmlsshim.googlecode.com/svn/trunk/html5.js"></script> 


























<head> 

这 行 代 码 会 从 html$shim.googlecode.com 这 个 Web 服 务 器 上 取得 脚本 , 然后 在 浏览 右 处 理 页 面 
其 余部 分 之 前 运行 。 这 个 脚本 使 用 前 面 描述 的 JavaScript 代 码 创建 所 有 的 新 HTML5 元 素 ， 然 后 还 
会 为 它们 动态 应 用 上 一 节 提 到 的 样式 , 确保 新 元 素 能 正确 地 显示 为 块 元 素 。 现 在 , 剩 下 的 事 儿 就 
是 使 用 这 些 元 素 ， 并 为 它们 应 用 你 自己 的 样式 。 

对 了 ， 刚 才 忘 说 了 ， 前 面 的 html5js 脚 本 应 该 是 有 条 件 执行 的 一 一 只 在 你 使 用 旧版 本 Internet 
Explorer 的 情况 下 才 会 执行 。 为 了 避免 不 必要 地 加 载 JavaScript 文 件 ， 可 以 像 下 面 这 样 把 引用 脚本 
的 代码 放 在 正 的 条 件 注释 中 : 
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<!--[if lt IE 9]> 
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 


这 样 ， 其 他 浏览 器 (IE9 及 更 高 版 本 ) 就 会 忽略 这 行 脚本 ， 为 你 的 页 面 节省 数 毫 秒 的 加 载 
时 间 。 


提示 前 面 的 例子 直接 使 用 了 来 自 谷 歌 代码 托管 站 点 的 垫 片 脚本 。 你 也 可 以 把 它 下 载 下 来 ， 地 
址 为 http://tinyurl.conythe-shiv。 下 载 后 放 到 本 地 目录 里 , 改 一 下 页 面 中 引用 这 个 脚本 的 地 
址 即 可 。 最后, 还 要 提醒 你 ,， 如果 你 是 在 本 地 计算 机 上 测试 网 页 (而 不 是 上 传 到 服务 器 )， 
Internet Explorer 会 自动 将 页 面 置 为 受 限 模式 。 意 思 就 是 ， 你 会 在 页 面 顶 部 看 到 臭名 昭著 
的 正安 全 提示 条 ， 告 诉 你 Internet Explorer 已 经 禁用 了 其 中 的 所 有 脚本 ， 包 括 HTML5 热 片 
脚本 。 要 想 正常 测试 ， 必 须 单 击 该 安全 提示 条 ， 选 择 允许 活动 的 内 容 。 





如 果 你 把 页 面 上 传 到 网 站 中 ,就 没有 这 个 问题 了 ,不 过 这 无 疑 会 增加 测试 的 工作 量 。 解决 方 
案 呢 ? 就 是 在 页 面 开 头 添 加 “Web 标 志 ”， 详 见 1.3.5 节 。 


工 二 


2.3.3 ”Modernizr: 一 站 式 解决 方案 


要 解决 为 语义 元 素 应 用 样式 的 问题 , 还 有 一 个 方案 : 使 用 Modernizr( 参见 1.6.7 节 )。 Modernizr 
内 置 了 HTML5 垫 片 脚 本 ， 因 此 会 自动 蔡 你 解决 上 述 问 题 ， 不 用 你 再 使 用 html5.js 或 者 添加 什么 样 
式 规则 了 。 因 此 ， 如 果 你 已 经 在 用 Modernizr 检 测 功 能 了 ， 那 么 要 考虑 的 就 只 有 怎么 使 用 语义 元 
素 了 。 


2.4 使 用 语义 元 素 设 计 站 点 


在 一 个 简单 、 类 似 文档 的 页 面 中 应 用 语义 元 素 相 对 容易 。 如 果 是 把 它们 应 用 到 整个 站 点 也 
没有 任何 困难 ， 但 必须 面 对 一 系列 新 问题 。 因 为 HTML5S 还 是 一 块 未 被 开垦 的 处 女 地 ， 很 少 有 
约定 俗 成 的 惯例 〈 但 却 有 一 大 堆 合情合理 的 争议 )。 这 样 说 吧 ， 假设 你 准备 从 两 种 标记 方案 中 
选择 一 种 ，HTML5 标 准 会 说 它们 都 是 完全 可 以 接受 的 ， 至 于 哪个 方案 最 适合 你 的 内 容 ， 你 自 
己 说 了 算 。 

图 2-6 展 示 了 我 们 接 下 来 将 要 设计 的 一 个 更 有 创造 性 的 作品 。 
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上 [| 二 图 2-6; 这 里 ， 之 前 仅 有 一 页 
所 ) 谨 | file///C/HTMLS/Chapter 02/ApocalypseSite.html "CI 会 的 文 章 页 面 尼 经 变 成 四 








ARE YOU READY FoR..， 


Apocalypse 





Articles 


e How The World Could Fnd 

ae Would Alicns Enslave or 
Eradicate Us? 

e Greal Fluvds vf the Past 

e Could Chemotherapy Cause 
Cancer? 

® Why Everything You Know About 
Zombie Attacks Is Wrong 

® More.. 





AboutUs 


Apocalypse Today is a world leader 
in conspiracy theories, dour 
predictions, and panic-spreading. 
Our motto is "be prepared for every 
possibility (except the good ones).” 


How the World Could End 


Scenarios that spell the cnd of life as we know 
by Ray N. Camation 


RIGHT NOW, you're probably feeling pretty good. After all, life in the developed 
world is comfortable 一 probably more comfortable than it's been for the average 
huinan being tiroughoutb all of recbded ist 


But don't get too smug. There's still 
plenty of horrific ways it could all fall 
apart In this article, you'll learn ahont 
a few of our favorites. 


Mayan Doomsday 
Skeptics suggest that the Mayan 
calendar simply rolls to a new 











个 完整 的 基于 内 容 的 站 点 。 
站 点 的 页 眉 横 跨 上 方 ， 内 容 
位 居 其 下 ， 而 左 侧 的 导航 条 
提供 了 导航 控件 、About Us 
和 一 张 图 片 广告 











5,126-year era after 2012, and 
doesn't actually predict a life-ending 
apocalypse. But given that the 
long-dead Mayans were wrong about 
virtually everything else, why should 
We trust them on this? 





Willyou be thc last person standing 
if onc of thesc apocalyptic scenarios 
plays out? 


Robot Takeover 

Not quite as frightening as a Vampire Takeover or Living-Dead Takeover a robot 
rebellion is sulla disduieting thought. We are already vulnumbered by vur 
technological gadgets, and even Bill Gates tears the day his Japanese robot slave 
turns him over bythe ankles and asks [in a suitably robotic voice] "Who's your 
daddy now?" 


20,679 Physicians 
CKIES 
tritatin 





‘Tt's toasted" 


Unexplained Singularity 
We don't know how the universe 
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2.4.1 ”理解 cheader> 


对 于 <header> 元 素来 说 ， 有 两 种 使 用 方式 ， 但 差别 并 不 大 。 一 种 是 用 它 标注 内 容 的 标题 ， 另 
一 种 是 用 它 标注 网 页 的 页 眉 。 有 时 候 , 这 两 种 用 途 是 重 钱 的 ( 比如 图 2-1 中 那个 单 页 文章 的 例子 )。 
但 有 时 候 , 你 的 网 页 里 不 仅 要 用 <header> 标 注 页 眉 ,， 还 要 用 它 去 标注 很 多 内 容 的 标题 。 图 2-6 所 示 
的 例子 就 是 这 种 情况 。 

但 有 时 候 到 底 该 不 该 用 <header> 并 不 十 分 明确 ,因为 要 标注 的 内 容 区 块 的 角色 变化 会 影响 最 
终 的 决策 。 如 果 你 处 理 的 是 内 容 ,那么 除非 必要 ， 一 般 不 必 使 用 <header>。 只 有 在 内 容 标题 还 附 
带 了 其 他 信息 的 情况 下 ， 才 有 必要 考虑 <header>。 也 就 是 说 ， 其 中 包含 标题 、 概 要 、 发 表 日 期 、 
作者 署名 、 图 片 或 子 主题 链接 等 很 多 内 容 ， 例 如 : 


<header> 
<h1>How the World Could End</h1> 
<p class="Tagline">Scenarios that spell the end of life as we know it</p> 
<p class="Byline">by Ray N. Carnation</p> 

</header> 
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不 过 ,在 为 网 站 创建 页 由 的 时 候 ， 人 们 多 数 会 直接 考虑 <header> 元 素 ， 即 便 这 个 页 眉 就 是 一 
个 CSS 控 制 的 长 盒子 ， 里 面 啥 都 没有 。 毕 竟 页 眉 是 网 站 的 一 个 核心 组 件 ， 谁 知道 哪 天 你 要 往 里 面 
塞 点 什么 东西 呢 ! 

结论 如 下 : 网 页 中 可 以 包含 多 个 cheader> 元 素 ( 通常 也 应 该 如 此 )， 即 使 相应 的 区 块 在 页 面 
中 的 角色 不 一 样 。 











把 网 页 变 成 网 站 
图 2-6 展 示 了 一 个 虚构 的 网 站 中 的 一 个 页 面 。 
在 真实 的 网 站 中 ， 可 能 几 十 个 甚至 更 多 个 页 面 都 会 有 相同 的 布局 ( 以 及 相同 的 侧 边 栏 )。 
访客 点 击 页 面 的 链接 后 ， 唯 一 变化 的 地 方 就 是 主页 面 中 的 内 容 一 一 也 就 是 这 里 的 文章 。 
HTML5 并 没有 什么 魔法 ， 它 不 会 让 你 的 网 页 自动 变 成 网 站 。 换 名 话说 ， 你 还 要 靠 如 下 所 
示 的 以 前 开发 网 站 的 技术 和 技巧 。 
口服 务 器 端 框架 。 其 实 背 后 的 思想 都 很 简单 : 在 浏览 器 请 求 某 个 页 面 时 ，Web 服 务 器 临时 
将 页 面 的 各 个 部 分 组 装 起 来 ， 包 括 公共 的 元 素 ( 如 导航 条 ) 和 内 容 。 这 是 目前 最 常用 的 
一 种 技术 ,也 是 构建 大 型 、 专 业 网 站 的 必由之路 。 以 不 同方 式 实现 这 种 手段 的 技术 不 计 
其 数 , 包括 很 早 就 出 现 的 服务 器 端 包含 功能 , 一 些 富 Web 应 用 平台 ( 如 ASP.NET 和 PHP )， 
还 有 内 容 管 理 系统 ( 如 Drupal 和 WordPress )。 
口 页 面 模板 。Dreamweaver、Expression Web 等 功能 强大 的 网 页 编辑 器 中 就 有 页 面 模板 功 
能 ,模板 就 是 一 个 定义 了 页 面 结 构 并 且 包 含 页 面 中 会 重复 出 现 的 内 容 ( 像 页 刷 和 侧 边 栏 ) 
的 页 面 有 了 模板 , 就 可 以 利用 它 来 创建 网 站 的 所 有 页 面 。 最 关键 的 是 , 更 新 模板 之 后 ， 
网 站 编辑 器 会 自动 更 新 使 用 该 模板 的 所 有 页 面 。 





图 2-6 所 示 的 启示 录 网 站 用 一 个 cheader> 元 素 作为 站 点 的 页 眉 , 用 另 一 个 <header> 元 素 作 为 文 
档 的 标题 区 。 作 为 页 丑 的 cheader> 中 有 一 张 横幅 图 片 ， 图 片 中 的 文本 也 是 由 图 片 编辑 右 生 成 的 : 


<header class="SiteHeader"> 
<img src="site logo.png" alt="Apocalypse Today"> 
<h1 style="display:none">Apocalypse Today</h1> 
</header> 


在 此 , 我 们 注意 到 页 眉 中 还 包含 一 个 我 们 在 页 面 中 看 不 到 的 <h1> 元 素 , 其 中 的 内 容 与 图 片 中 
的 文本 内 容 相 同 。 而 一 条 内 联 样式 隐藏 了 这 个 标题 。 

这 个 例子 提出 了 一 个 明显 的 问题 一 一 为 什么 要 添加 一 个 你 看 不 见 的 标题 ? 原因 其 实 不 止 一 
个 。 首 先 ，<header> 元 素 中 都 应 该 包含 某 个 级 别 的 标题 ， 这 样 做 仅仅 是 为 了 遵守 HTML5 的 规定 。 
其 次 , 这 样 设计 可 以 让 使 用 屏幕 阅读 器 的 人 能 够 无 障碍 地 阅读 ， 因 为 他 们 经 常会 从 一 个 标题 跳 到 
男 一 个 标题 ， 而 不 会 关注 标题 之 间 的 内 容 。 最后， 这 样 就 为 页 面 建立 了 标题 结构 ， 而 页 面 其 他 部 
分 的 标题 都 要 依 序 选用 。 如 果 我 们 说 ,在 站 点 的 页 眉 中 使 用 了 <h1> 元 素 后 ,你 就 应 该 给 页 面 中 其 
他 的 区 块 (如 “Articles” 和 “About Us”) 选用 <h2> 元 素 作 标题 ， 你 可 能 觉得 有 点 怪 。 要 了 人 解 为 
什么 这 样 设计 ， 请 参考 下 面 的 附注 栏 “ 站 点 的 标题 结构 ”。 
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注意 当然 ,简单 地 给 页 眉 中 添加 一 行文 字 比 较 省 事 。( 而 如 果 你 喜欢 一 些 新 奇 的 字体 ， 还 可 以 


考虑 CSS3 新 的 Web 字 体 功能 ， 详 见 6.4 节 。) 但 对 于 诸多 把 标题 放 在 图 片 中 的 网 页 而 言 ， 
隐藏 标题 同样 也 是 个 不 错 的 办 法 。 


站 点 的 标题 结构 

一 个 页 面 中 可 以 有 多 个 一 级 标题 吗 ? 这 样 做 到 底 好 不 好 ? 

根据 HTML 的 官方 说 法 ， 一 个 页 面 中 可 以 有 任意 多 个 一 级 标题 。 但 是 ， 很 多 网 站 开发 人 员 
更 倾向 于 每 个 页 面 只 使 用 一 个 一 级 标题 ， 因 为 这 样 能 保证 网 页 的 无 障碍 性 。( 因为 使 用 屏幕 阅 
读 器 的 人 在 从 一 个 三 级 标题 跳 到 另 一 个 三 级 标题 的 时 候 ， 有 可 能 错过 中 间 的 一 级 标题 。) 也 有 
不 少 网 络 维护 人 员 认 为 , 每 个 页 面 就 应 该 只 有 一 个 一 级 标题 , 这 个 一 级 标题 在 整个 网 站 中 是 独 
一 无 二 的 ， 可 以 明确 地 告诉 搜索 引擎 网 站 中 有 什么 内 容 。 

图 2-6 中 的 例子 采用 的 就 是 这 种 风格 。 站 点 顶部 的 标题 “Apocalypse Today” 是 页 面 中 唯一 
的 <h1> 元 素 。 页 面 中 其 他 的 部 分 ， 如 侧 边 栏 中 的 Articles 和 AboutUs, 使 用 的 都 是 二 级 标题 。 文 
章 的 标题 使 用 的 也 是 二 级 标题 。( 额外 做 一 点 规划 ， 可 以 让 一 级 标题 中 也 包含 当前 文章 的 信 
息 一 一 毕 竞 , 这 个 标题 是 不 可 见 的 ， 如 此 一 来 可 以 让 通过 谷歌 等 搜索 引擎 搜索 特定 关键 词 的 人 
也 能 看 到 这 个 页 面 。) 

不 过 ， 除 此 之 外 还 有 一 种 风格 ， 也 同样 是 允许 的 。 换 名 话说 ， 可 以 在 页 面 中 每 个 主要 部 分 
都 使 用 一 级 元 素 ， 比 如 侧 边栏 、 文 章 等 。 

或 者 ,也 可 以 给 网 站 一 个 一 级 标题 ,而 把 侧 边栏 的 内 容 用 二 级 标题 标注 ( 就 跟 眼 下 这 个 例 
子 一 样 )， 但 是 给 文章 再 应 用 一 个 一 级 标题 。 在 HTML5 中 ,这样 没有 问题 ， 因 为 它 的 纲要 系统 
允许 这 样 。 稍 后 在 2.5.3 节 将 会 介绍 ， 有 些 元 素 ( 包括 carticle> )， 是 被 当 作 一 个 独立 的 区 块 来 
处 理 的 ， 独立 的 区 块 可 以 有 自己 不 同 的 纲要 。 这 样 , 诸如 此 类 的 独立 区 块 完全 可 以 重新 建立 标 
题 级 别 ， 再 从 <h1> 开 始 。( 不 过 ，HTIML5 也 说 从 任何 标题 级 别 开 始 都 挺 好 的 。) 

简 言 之 ， 如 何 设计 站 点 的 标题 结构 是 一 个 没有 唯一 答案 的 命题 。 不 过 ， 随 着 HTML5 获 得 
胜利 并 统治 Web， 好 像 多 个 ch1> 的 设计 会 越 来 越 时 曼 。 不 过 现在 ， 很 多 开发 人 员 为 了 让 屏幕 阅 
读 器 开心 ， 仍 然 坚 持 只 使 用 一 个 <h1>。 





2.4.2 ”用 enav> 标 注 导 航 链接 


这 个 启示 录 网 站 中 最 有 意思 的 新 功能 就 是 左 侧 的 侧 边 栏 , 其 中 包含 网 站 的 导航 、 其 他 信息 和 
一 张 图 片 广告 。( 一 般 来 说 ， 广 告 位 都 是 放 一 段 JavaScript 脚 本 ， 从 类 似 Google AdSense 等 服务 随 
机 地 提取 广告 。 但 我 们 这 个 例子 就 硬 编码 了 一 张 图 片 ， 就 算是 一 种 替代 吧 。) 

在 传统 的 HTML 网 站 中 ， 你 可 能 会 把 整个 侧 边 栏 都 放 到 一 个 cdiv> 中 。 而 在 HTML5 时 代 ， 则 
应 该 主要 使 用 两 个 针对 性 更 强 的 元 素 : <aside> 和 <nav>。 
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要 说 <aside> 元 素 ， 倒 是 跟 <header> 元 素 有 点 像 ， 哪 里 像 呢 ? “aside> 的 含义 也 有 一 点 细微 的 
发 散 。 可 以 用 它 来 标注 一 段 与 正文 相关 的 内 容 (2.2.5$ 节 正 是 这 么 做 的 )， 也 可 以 用 它 表 示 页 面 中 
一 个 完全 独立 的 区 块 一 一 作为 页 面 主要 内 容 的 陪衬 。 

而 <nav> 元 素 则 用 于 包装 一 组 链接 。 这 些 链 接 可 以 指向 当前 页 面 中 的 主题 ， 也 可 以 指向 网 站 
中 的 其 他 页 面 。 多 数 页 面 中 都 会 包含 多 个 cnav> 区 块 。 但 并 不 是 所 有 链接 都 需要 <nav> 区 块 一 一 相 
反 , <nav> 通 常 只 用 于 页 面 中 最 大 最 主要 的 导航 区 。 例如 , 对 于 一 组 文章 的 链接 ( 像 图 2-6 那 样 的 )， 
绝对 需要 一 个 cnav> 区 块 。 可 是 ， 如 果 只 是 放 在 页 面 底部 几 个 许可 或 联系 信息 的 链接 ， 那 大 可 不 
必 麻 烦 <nav>。 

明白 了 这 两 个 元 素 的 用 途 ， 接 下 来 该 付 诸 实践 了 。 首 先 ， 再 看 一 看 图 2-6 中 的 侧 边栏 。 然 后 ， 
在 一 张 纸 上 画 一 画 ， 看 你 打算 怎么 用 标记 体现 其 中 内 容 的 结构 。 最 后 ， 再 接着 往 下 看 ,一块 来 找 
一 个 最 佳 方案 。 
事实 上 ， 如 图 2-7 所 示 ， 至 少 有 两 个 比较 合理 的 方式 来 构造 侧 边栏 。 







































































全 i 图 2-7: 左 : 可 以 把 整个 侧 边栏 想象 成 一 个 导航 区 ， 在 
其 中 填 入 一 些 内 容 。 这 样 ， 整 个 侧 边栏 可 以 放 在 一 个 


:此 处 是 链接 | enav> 中 ， 其 他 内 容 可 以 使 用 caside> ( 因为 其 中 的 内 容 
3 与 侧 边栏 的 主要 内 容 一 一 链接 无 关 ) 。 右 : 或 者 , 可 以 























把 整个 侧 边栏 想象 成 一 个 独立 的 多 用 途 的 网 页 区 块 ,这 
二 样 ， 侧 边栏 就 是 一 个 caside>， 而 其 中 有 关 导 航 的 内 容 
放 在 chav 里面 


到 区 














这 个 启示 录 站 点 使 用 的 是 第 二 种 方案 ( 即 图 2-7 中 右 侧 的 结构 )。 选 择 该 方案 主要 是 因为 这 里 
的 侧 边 栏 有 多 种 用 途 ， 而 没有 哪 一 种 用 途 是 主要 用 途 。 不 过 ,要 是 这 里 的 导航 又 长 又 复杂 ( 比如 
都 用 上 了 可 折 芭 的 菜单 形式 )， 只 是 后 面 跟着 一 小 段 内 容 ， 那 第 一 种 方案 就 更 合适 一 些 。 

以 下 就 是 构成 侧 边栏 的 标记 ， 包 含 三 个 区 块 : 

<aside class="NavSidebar"> 

<nav> 
<h2>Articles</h2> 
<Uul> 


<li><a href="...">How The World Could End</a></1i> 
<li><a href="...">Would Aliens Enslave or Eradicate Us?</a></1i> 


















































</ul> 
</nav> 
<section> 
<h2>About Us</h2> 
<p>Apocalypse Today is a world leader in conspiracy theories ..." 
</p> 
</section> 
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<div> 
<img src="ad.jpg" alt="Luckies cigarette ad: it's toasted"> 

</div> 

</aside> 


看 完 这 些 代码 ， 应 该 注意 到 如 下 关键 点 。 

口 标题 〈Articles 和 About Us) 使 用 的 是 二 级 标题 。 这 样 ， 它 们 就 自然 位 于 网 站 的 一 级 标题 

之 下 ， 从 而 方便 屏幕 阅读 器 无 障碍 地 阅读 标题 。 

口 链接 以 cul> 和 <1i> 元 素 组 成 的 无 序列 表 来 标记 。 网 站 设计 师 普 遍 认 为 , 处 理 一 组 链接 的 最 
佳 方式 ， 也 是 最 无 障碍 的 方式 ， 就 是 使 用 列表 。 不 过 ， 你 可 能 得 通过 样式 表 删 除 列表 项 
默认 的 缩 进 ( 这 个 例子 已 经 这 样 做 了 ) 和 项 目 符号 (本 例 没 有 项 目 符号 )。 

口 “About Us” 包 含 在 一 个 csection> 元 素 中 。 这 是 因为 没有 合适 的 语义 元 素 。<section> 
当然 要 比 cdiv> 更 具体 一 点 ， 它 适合 任何 以 标题 开头 的 内 容 区 块 。 假 如 有 一 个 更 具体 的 元 
素 (例如 ,假设 有 一 个 <about> 元 素 )， 那 么 这 里 就 不 会 用 <section>， 可 惜 没有 。 

口 图 片 广告 放 在 一 个 <div> 里 。 如 前 所 述 ，<section> 元 素 只 适合 带 标题 的 内 容 ， 而 这 里 的 图 
片区 块 没有 标题 。( 而 如 果真 有 的 话 ， 比 如 “A Word from Our Sponsors”， 那 就 该 用 
<section> 元 素 了 。) 从 技术 角度 看 , 根本 没有 必要 把 图 片 还 放 在 其 他 元 素 中 。 但 有 了 <div>， 
区 块 之 间 的 关系 就 更 明确 了 ， 这 样 更 容易 分 别 为 不 同 的 区 块 应 用 样式 ， 或 者 在 必要 时 通 
过 JavaScript 分 别 操作 它们 。 

实际 上 ,还 有 一 些 细节 ， 这 个 侧 边 栏 里 没有 , 但 可 能 其 他 侧 边 栏 里 会 有 。 比 如 ,复杂 的 侧 边 

栏 可 能 会 以 cheader> 和 <footer> 作 为 开头 和 结尾 , 也 有 可 能 包含 多 个 cnav> 区 块 一 一 存档 文章 链接 

一 个 、 新 闻 报 道 链接 一 个 、 友 情 链 接 或 相关 站 点 链接 一 个 ， 等 等 。 有 兴趣 的 话 ， 读 者 可 以 自己 找 

找 一 些 有 代表 性 的 博客 ， 其 中 的 侧 边栏 往往 包含 很 多 区 块 ， 其 中 不 少 都 是 导航 用 的 。 

这 里 为 <aside> 标 注 的 侧 边 栏 应 用 样式 的 规则 ， 与 为 传统 的 <div> 标 注 的 侧 边 栏 应 用 样式 的 规 

则 一 样 。 它 们 都 会 把 侧 边栏 摆 放 到 正确 的 位 置 上 ， 使 用 绝对 定位 ,设置 某 些 格式 上 的 细节 ， 如 内 

边 距 、 背 景 ， 等 等 : 

aside.NavSidebar 


{ 
position: absolute; 
top: 179px; 
left: Opx; 
padding: 5px 15px Opx 15px; 
width: 203px; 
min-height: 1500px; 
background-color:#eee; 
font-size: small; 










































































} 

这 条 规则 后 面 是 一 些 上 下 文 样式 表 规 则 , 分别 为 侧 边栏 中 的 <h2>、<ul>、<1i> 以 及 <img> 元 素 
应 用 样式 。( 跟 以 前 一 样 ， 可 以 从 http://prosetech.comyhtml5 下 载 示 例 代码 ， 然 后 仔细 研究 一 下 其 
中 的 所 有 样式 规则 。 ) 
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注意 我 们 已 经 介绍 了 ，<nav> 通 常会 单独 出 现 ， 有 了 时候 也 会 出 现在 caside> 中 。 其实 , 还 有 一 个 
地 方 也 经 常 可 以 看 到 它 的 身影 : 网 页 顶部 的 <header> 元 素 中 。 


理解 了 这 个 侧 边 栏 是 如 何 构造 的 ， 也 就 容易 理解 它 与 整个 页 面 布局 的 关系 了 ， 如 图 2-8 
所 示 。 




















图 2-8: 这 里 展示 了 启示 录 网 页 ( 图 2-6 ) 中 用 到 的 
Web Page 所 有 语义 元 素 


<header> 
J 


<aside> 














<article> 


<nav> <header> 


<section> 


<div> 








<footer> 

















使 用 <details> 和 <summary> 的 折 又 框 
你 肯定 在 有 的 网 页 上 见 过 可 以 折 胎 的 区 块 : 通过 单 击 区 块 标题 能 够 显示 或 隐藏 其 中 的 内 
容 。 折 党 框 是 用 JavaScript 能 够 轻 罗 实现 的 众多 界面 元 素 之 一 。 只 要 在 单 击 标题 的 时 候 ， 适 当 
改变 样式 设置 ， 隐 藏 内 容 : 


Var box = document.getElementById("myBox"); 
box.style.display = "none"; 


或 者 再 把 内 容 显 示 出 来 即 可 : 
var box = document.getElementById("myBox"); 
box.style.display = "block"; 


有 意思 的 是 ，HTML5 还 新 添 了 两 个 语义 元 素 ， 用 于 辅助 将 这 种 行为 自动 化 。 具 体 做 法 是 
把 可 以 折 登 的 区 块 放 在 一 个 cdetails> 元 素 中 ， 而 把 标题 放 在 一 个 <summary> 元 素 中 。 最 终结 果 
类 似 如 下 这 样 : 
<details> 
<summary>Section #1</summary> 


<p>If you can see this content, the section is expanded</p> 
</details> 


支持 这 两 个 元 素 的 浏览 器 ( 目前 只 有 Chrome 支 持 ) 只 会 显示 标题 可 能 还 会 带 有 视觉 
上 的 提示 (比如 在 标题 旁边 放 在 一 个 小 三 角形 图 标 )。 然 后 ， 用 户 单 击 标题 ， 再 把 完整 的 内 容 
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显示 出 来 。 不 支持 cdetails> 和 <summary> 的 浏览 器 则 上 来 就 会 显示 所 有 内 容 ， 用 户 也 不 能 把 内 
容 折 过 起 来 。 

目前 ， 业 内 对 <details> 和 <summary> 元 素 还 有 和 争议。 很 多 Web 开 发 人 员 认 为 它们 并 不 是 真 
正 的 语义 元 素 ， 因 为 它们 更 倾向 于 视觉 表现 ， 而 非 逻 辑 结构 。 

我 们 的 建议 是 最 好 不 要 使 用 cdetails> 和 <summary> 元 素 ， 因 为 支持 它们 的 浏览 器 太 少 了 。 
虽然 可 以 用 JavaScript 写 一 段 脚本 在 不 支持 它们 的 浏览 器 中 使 用 ， 但 编写 这 种 脚本 不 如 你 自己 
实现 一 个 在 任何 浏览 器 中 都 可 以 折 党 的 方案 ， 毕 竞 那 样 只 要 几 行 代码 而 已 。 


2.4.3 理解 区 块 


如 前 所 述 ， 区 块 元 素 <section> 是 应 该 最 后 考虑 的 语义 元 素 。 如 果 有 一 个 带 标题 的 内 容 块 ， 

而 其 他 语义 元 素 都 不 合适 ， 那 么 选择 csection> 通 常 比 选择 cdiv> 更 好 一 些 。 

那么 通常 应 该 在 csection> 元 素 中 放 什么 呢 ? 这 跟 你 的 看 法 有 关 ， 它 可 能 是 一 个 能 够 适合 

各 种 需求 的 灵活 的 工具 ， 也 可 能 是 一 个 松 松 垮 震 没有 明确 身份 的 怪物 。 之 所 以 会 有 这 么 大 的 区 

别 ， 主 要 是 因为 csection> 在 网 页 中 可 以 扮演 很 多 不 同 的 角色 。 可 以 放 在 <section> 中 的 内 容 有 

以 下 几 种 。 

口 与 页 面 主体 内 容 并 列 显示 的 小 内 容 块 ， 例 如 我 们 启示 录 网 站 中 的 About Us 段落 。 

口 独立 性 内 容 ， 但 却 不 能 用 文章 ( <article> ) 来 描述 ， 比 如 客户 的 购物 记录 或 产品 清单 。 

口 分 组 内 容 一 一 例如 ， 新 闻 站 点 中 的 一 组 文章 。 

口 比较 长 的 文档 中 的 一 部 分 。 比 如 ， 在 启示 录 网 站 的 文 草 中 ， 可 以 用 它 把 每 种 世界 末日 的 
情形 标注 为 一 个 独立 的 区 块 。 有 了 时候， 这 样 使 用 区 块 是 为 了 保证 文档 能 有 一 个 正确 的 纲 
要 ， 而 这 正 是 下 一 节 我 们 要 介绍 的 内 容 。 

前 面 列 出 的 最 后 两 项 可 能 会 令 你 觉得 很 不 可 思议 。 很 多 Web 开 发 人 员 会 觉得 用 一 个 元 素 既 可 

以 标注 一 篇 文章 中 的 一 个 片段 ， 又 可 以 标注 整个 一 组 文章 ， 这 伸缩 性 似乎 有 点 大 了 。 有 人 认为 

HTML5 人 至 少 应 该 用 两 个 不 同 的 元 素来 对 应 这 两 种 情况 。 但 HTML5 的 创造 者 希望 一 方面 保持 简单 

( 限制 新 元 素 的 数量 )， 另 一 方面 也 让 新 元 素 尽 可 能 灵活 且 实 用 。 

最 后 , 还 有 一 件 事 儿 要 考虑 。ksection> 元 素 也 会 影响 网 页 的 纲要 , 也 就 是 2.5 节 要 讨论 的 主题 。 






























































2.4.4 理解 <footer> 


HTML5 与 内 容 丰 富 的 “ 胖 ”<header> 可 谓 天 生 一 对 。 在 <header> 中 不 仅 可 以 放 副 标题 和 作 
者 署名 ， 还 可 以 添加 图 片 、 导 航 区 块 (使 用 cnav> 元 素 )， 以 及 任何 有 必要 放 在 页 面 项 部 的 内 容 。 

奇怪 的 是 ，HTMLS 对 “footer> 元 素 可 就 不 那么 有 人 人 情 味 了 。HTML5 规 定 ， 只 能 在 <footer> 
元 素 中 放 一 些 网 站 版 权 信息 、 作 品 来 源 、 法 律 限 制 及 链接 之 类 的 信息 。 不 能 在 <footer> 里 面 放 太 
多 链接 、 重 要 的 内 容 或 无 关 的 内 容 ， 如 广告 、 社 交 媒 体 按钮 以 及 网 站 部 件 等 。 

这 就 提出 了 一 个 问题 : 如 果 你 的 网 站 需要 一 个 “ 胖 ”<“footer> 怎 么 办 ? 毕竟 ,“ 胖 ”页 脚 目 
前 非常 流行 ( 见 图 2-9 中 的 例子 )。 这 些 “ 胖 ”页 脚 经 常会 用 到 如 下 所 示 的 一 些 花 哨 的 技术 。 
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口 固定 定位 ， 这 样 就 可 以 让 页 脚 始终 固定 在 浏览 
( 如 图 2-9 中 的 例子 所 示 )。 
口 关闭 按钮 ， 这 样 用 户 在 看 完 页 脚 内 容 后 ， 











子 所 示 )。 为 实现 这 个 功能 ,要 使 用 一 点 JavaScript 代 码 ( 与 前 一 节 


似 )， 以 便 隐 藏 包含 页 脚 的 元 素 。 











读 到 一 篇 文章 最 后 时 弹出 的 相关 文章 提示 框 )。 








如 


单 击 它们 就 可 以 腾 出 页 面 空 


口 部 分 透明 的 背景 ， 
责 声明 ， 部 分 透明 的 背景 很 合适 ， 通 
口 动画 ， 页 脚 在 视图 中 弹出 ， 或 者 滑 人 视图 ( 例如， 


果 你 的 站 点 中 包含 这 种 页 脚 ， 就 要 作出 选择 。 比 较 简 单 的 办 法 是 无 视 规 定 。 这 


窗口 底部 ， 无 论 访客 如 何 滚动 都 无 所 谓 





间 ( 如 图 2-9 中 的 例 
附注 栏 中 使 用 的 代码 相 


这 样 就 可 以 透 过 页 脚 看 到 内 容 。 如 果 页 脚 正在 宣布 即时 新 闻 或 重要 的 
常 与 关闭 按钮 联 用 。 





可 以 看 看 在 http:/www.nytimes.com 上 阅 


这 个 办 法 并 没 





有 听 起 来 那么 可 怕 ， 因 为 其 他 网 站 的 开发 人 员 也 在 犯 同样 的 错误 。 而 随 着 时 间 推 移 , 官方 的 规定 


也 可 能 会 放 开 ， 人 允许 用 <footer> 包 含 奇 特 的 页 脚 。 可 是 ， 
得 调整 一 下 标记 。 好 在 调整 标记 不 难 。 


假如 你 现在 不 想 违 反 标准 的 规定 ， 那 就 
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Be 于 图 2-9: 这 个 莞 唐 的 “ 胖 ” 页 脚 
C © Fatfooterhtml 交 [ 忆 中 包含 不 少 多 余 的 内 容 ， 比如 一 
个 奖项 图 片 和 一 些 社交 媒体 按 





钮 。 它 使 用 了 固定 定位 使 自己 一 
直 显 示 在 浏览 器 窗口 底部 , 就 像 
一 个 工具 条 。 好 在 这 个 页 脚 有 一 
个 地 方 可 以 弥补 它 的 缺点 ， 那 
| 单 击 该 
按钮 就 能 让 这 个 页 脚 从 视野 中 
”| 路 






































调整 标记 的 关键 在 于 从 多 余 的 内 容 中 提取 出 标准 的 页 脚 来 。 在 浏览 器 中 , 这 些 内 容 看 起 来 还 
是 一 个 页 脚 ， 但 在 标记 中 ， 其 他 内 容 都 不 包含 在 <footer> 元 素 中 。 例 如 ， 以 下 就 是 图 2-9 中 “ 胖 ” 


页 脚 的 实际 结构 : 


<div id="FatFooter"> 
<!-“ 胖 ”页 脚 的 内 容 --> 
<img onclick="CloseBox()" src="close icon.png" class= 
<footer> 
《1-- 标准 页 脚 的 内 容 --> 


<p>The views expressed on this site do not ... </p> 





"CloseButton"> 
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</footer> 
</div> 


最 外 于 的 <div> 没 有 特殊 含义 ， 它 只 是 负责 把 多 余 的 内 容 和 标准 的 页 脚 内 容 包装 起 来 。 同 样 ， 
可 以 给 它 应 用 一 些 样 式 表 规则 ， 以 便 将 其 锁定 在 合适 的 位 置 上 : 


#FatFooter { 
position: fixed; 
bottom: Opx; 
height: 145px; 
width: 100%; 
background: #ECD672; 
border-top: thin solid black; 
font-size: small; 


} 








注意 ”在 这 个 例子 中 ,样式 表 规则 是 通过 了 D 应 用 样式 的 (使 用 #FatFooter 选 择 符 )， 并 没有 使 用 
类 名 (如 .FatFooter 选 择 符 )。 这 是 因为 “ 胖 ” 页 脚本 身 已 经 有 了 唯一 的 ID， 目 的 是 为 了 
方便 JavaScript 代 码 在 用 户 单 击 关闭 按钮 时 可 以 找到 并 隐藏 它 。 这 种 情况 下 ， 在 样式 表 中 
使 用 唯一 的 ID 要 比 另外 添加 一 个 类 名 更 可 取 。 





al 


当然 ， 也 可 以 把 页 脚 中 的 其 余 内 容 放 在 一 个 caside> 元 素 中 ， 从 而 清楚 地 表明 其 中 的 内 容 
于 一 个 独立 的 区 块 ， 与 页 面 中 的 其 他 内 容 无 关 。 相 应 的 标记 结构 类 似 如 下 所 示 : 
<div id="FatFooter"> 
<aside> 
<!-“ 胖 ”页 脚 的 内 容 --> 
<img onclick="CloseBox()" src="close icon.png" class="CloseButton"> 
c/aside> 


<footer> 
《1-- 标准 页 脚 的 内 容 --> 
<p>The views expressed on this site do not ... </p> 
</footer> 
</div> 


这 里 最 重要 的 一 点 是 没有 把 cfooter> 放 到 <aside> 元 素 中 。 因 为 <footer> 并 不 属于 <aside>， 
而 是 整个 网 站 的 一 部 分 。 类似 地 , 如 果 有 一 个 <footer> 属 于 某 些 内 容 , 那么 就 应 该 将 这 个 <footer> 
放 在 包含 相应 内 容 的 元 素 中 。 














注意 ”正确 使 用 HTMLS 语 义 元 素 的 规则 和 指导 方针 还 在 变化 。 在 HTML 社 区 中 ， 有 关 如 何在 大 
型 、 复 杂 站 点 中 正确 使 用 标记 的 话题 ， 常 常会 引起 激烈 的 争论 。 在 此 ， 我 给 大 家 一 个 建 
议 : 如 果 某 个 元 素 看 起 来 不 适合 标注 你 的 内 容 ， 那 就 不 要 用 。 当 然 ， 你 也 可 以 上 网 去 讨 
论 ， 很 多 超 聪明 的 HIML 大 师 会 为 你 现身说法 。( 最 好 的 一 个 去 处 就 是 
http://htmlSdoctorcom， 在 该 网 站 大 多 数 文章 的 评论 中 ， 都 可 以 看 到 正在 争论 中 的 话题 。) 
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2.4.5 ”使 用 cmain> 标 识 主要 内 容 


HTML5 还 有 一 个 经 常 被 人 忽视 的 xmain> 元 素 ， 用 于 标识 网 页 的 主要 内 容 。 比 如 ， 在 前 面 的 
启示 录 网 站 上 ,主要 内 容 就 是 整 篇 文章 ,不 包含 站 点 页 眉 、 页 脚 和 侧 边 栏 。 强 烈 建议 大 家 在 自己 
的 网 页 中 使 用 这 个 元 素 。 

在 启示 录 网 站 中 ， 我 们 就 用 <main> 包 装 了 <article>: 


“1DOCTYPE html> 
<html lang="en"> 
<head> 





























</head> 
<body> 
<header> 
</header> 
<aside> 
</aside> 
<main> 
<article> 
</article> 
</main> 
<footer> 
</footer> 
</body> 
</html> 


不 能 把 cmain> 骨 套 到 <article> (或 其 他 任何 语义 元 素 ) 里 边 。 这 是 因为 cmain> 元 素 的 使 命 就 
是 包 右 页 面 中 的 主要 内 容 ， 而 非 标 识 文 档 中 某 个 重要 的 部 分 。 换 名 话说 ,一 个 页 面 中 只 能 有 一 个 
<main> 元 素 。 
乍 一 看 好 像 cmain> 也 没有 大 用 处 。 可 是 它 对 屏幕 阅读 器 很 重要 ,有 了 它 ， 屏幕 阅读 器 就 可 以 
跳 过 那些 次 要 的 内 容 ， 比 如 页 眉 、 导 航 菜单 、 广 告 和 侧 边 栏 ， 直 达 内 容 。 我 们 这 个 例子 中 <main> 
紧 挨 着 carticle>， 这 不 是 必须 的 。 在 复杂 些 的 页 面 中 ， 比 如 包含 多 个 carticle> 元 素 时 ，<main> 
就 应 该 包含 所 有 <article>， 像 这 样 : 


<main> 
<article> 















































</article> 
<article> 
</article> 


<article> 




















54 | 第 2 章 用 语义 元 素 构 造 网 页 





邮 


</article> 


</main> 

很 明显 ， 每 个 carticle> 都 包含 自己 的 内 容 ， 而 <main> 包 含 所 有 文章 。 

就 算 页 面 中 没有 <article> 元 素 ， 同 样 可 以 使 用 <main> 元 素 。 比 如 ， 页 游 或 应 用 页 面 可 以 用 
<main> 元 素 包 庄 用 于 创建 游戏 和 应 用 的 标记 。 总 之 一 句 话 ， 就 是 cmain> 只 应 该 包含 主要 内 容 ， 而 
不 是 上 下 左右 的 外 部 细节 。 























注意 “main> 是 一 个 相对 新 的 元 素 ， 是 在 HTMLS 的 升级 版 HTML 5.1 (参见 前 言 中 的 “什么 时 候 
可 以 使 用 HTML5”) 中 引入 的 。 


2.5 HTML5 纲要 


HTMLS 定 义 了 一 组 规则 ， 用 于 说 明 如 何 为 网 页 创建 文档 纲要 ( document outline )。 网 页 的 纲 
要 能 够 提供 很 多 便利 。 例 如 , 浏览 器 可 以 让 你 从 纲要 中 的 一 处 跳 到 男 一 处 。 设计 工 具 可 以 让 你 通 
过 在 纲要 视图 中 拖 放 来 重 排 区 块 。 搜 索引 擎 可 以 使 用 纲要 构建 更 好 的 页 面 预览 ， 而 屏幕 阅读 器 获 
得 的 便利 最 大 ， 通 过 使 用 纲要 可 以 引导 视力 有 障碍 的 用 户 在 深度 组 套 的 区 块 和 子 区 块 中 导航 。 

不 过 , 这些 情 形 还 没有 一 项 成 为 现实 ， 因 为 除了 下 一 节 将 要 介绍 的 儿 个 开发 人 员工 具 , 今天 
几乎 还 没有 谁 在 使 用 HTML5 纲 要 。 





























注意 一 个 不 影响 页 面 在 浏览 器 中 的 表现 ， 也 没有 其 他 工具 使 用 的 功能 很 难 让 人 兴奋 。 但 是 ， 
通过 评审 网 页 ( 至 少 是 网 站 中 典型 网 页 ) 的 纲要 来 确保 其 结构 合理 ， 而 且 你 也 没有 破坏 
HTMLS 的 规则 ， 这 个 想法 还 是 很 不 错 的 。 


中 
站 


2.5.1 如 何 查看 纲要 


要 真正 理解 纲要 ， 只 需 看 一 看 你 的 网 页 生成 的 纲要 是 什么 样子 的 。 目 前 , 还 没有 浏览 需 实 现 
HTML5 纲 要 (或 者 给 你 提供 一 种 查看 方式 )。 不 过 ， 倒 是 有 几 个 工具 填补 了 这 个 空白 。 

口 在 线 HTML 纲 要 生成 器 。 访 问 http:Wgsnedders.html5.org/outliner/， 告 诉 纲要 生成 器 你 想 为 
哪个 网 页 生成 纲要 。 如 同 我 们 在 1.4.2 节 使 用 的 HTML5 验 证 器 一 样 ， 可 以 通过 三 种 方式 提 
交 网 页 : 从 本 地 电脑 中 上 传 、 提 供 URL 或 直接 在 文本 框 粘贴 标记 。 

口 Chrome 扩 展 。 在 Chrome 浏 览 絮 中 查看 网 页 纲要 时 ， 可 以 使 用 h50 插 件 分 析 纲 要 。 访 问 
http://code.google.com/p/h50 安 装 该 插件 ， 然 后 在 网 上 找 开 一 个 HTML5 页 面 看 一 看 (可惜 
的 是 ， 在 写作 本 书 时 ，h5o 不 能 分 析 本 地 计算 机 中 的 文件 )。 然 后 浏览 器 地 址 栏 中 会 出 现 
一 个 纲要 图 标 , 单 击 该 图 标 就 会 显示 页 面 的 结构 ( 如 图 2-10 所 示 )。hso 的 页 面 中 也 提供 了 



























































2.5 HTML5 纲 要 | 55 





一 个 书签 工具 (bookmarklet ) 可 以 添加 到 浏览 器 书签 列表 中 的 一 小 段 JavaScript 代 码 ， 
通过 它 可 以 在 Firefox 和 Internet Explorer 中 显示 页 面 的 纲要 ， 但 也 时 候 也 会 出 点 小 状况 。 
口 Opera 扩 展 。Chrome 的 ho 扩展 也 有 一 个 针对 Opera 开 发 的 版 本 ， 安 装 地 址 在 http:/tinyurl. 





























com/3k3ecdy。 
人 le 图 2-10， 在 通过 安装 了 hso 
口 Apocalypse Now \5 的 Chrome 浏览 器 访问 
| € CC! |@ ApocalypsePage_Original.htm 导 窑 | 对 HTML5 网 页 时 ,地 址 栏 中 会 
| 1. How the World Could End RS = 出 现 一 个 纲要 图 标 ， 单 击 它 
> Korat rrr 就 会 弹出 一 个 包含 整个 页 
4 ov Ehnel Grate “| 面 纲要 的 小 窗 


，Global Epidemic 





RIGHT NOW, you're probably feeling pretty good. After all, life in 
the developed world is comfortable—probably more 
comfortable than it's been for the average human being 
throughout all of recorded history. 


But don't get too smug. There's still plenty of horrific ways it 
could all fall apart. In this article, you'll learn about a few of our 
favorites. 


























2.5.2 ”基本 纲要 


要 知道 自己 网 页 的 纲要 是 什么 样子 , 可 以 想象 把 页 面 中 的 所 有 内 容 都 剥离 ,只 剩 下 编号 的 标 
题 元 素 (<h1>、<h2>、<h3> 等 ) 中 的 文本 。 然 后 ， 根 据 它们 在 标记 中 的 位 置 缩 进 标题 ， 那 么 舱 套 
最 深 的 标题 在 纲要 中 的 缩 进 也 最 多 。 

以 最 初 的 还 没有 应 用 HTML5 元 素 之 前 的 启示 录 文 章 页 面 的 标记 为 例 : 

<body> 


<div class="Header"> 
<h1>How the World Could End</h1> 














cjdivy 

<h2>Mayan Doomsday</h2> 
<h2>Robot Takeover</h2> 
<h2>Unexplained Singularity</h2> 
<h2>Runaway Climate Change</h2> 


<h2>Global Epidemic</h2> 
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<div class="Footer"> 
cjdivy 
</body> 
这 个 简单 的 结构 会 生成 如 下 所 示 的 纲要 : 
1. How the World Could End 
1. Mayan Doomsday 
2. Robot Takeover 
3. Unexplained Singularity 





4. Runaway Climate Change 
$5. Global Epidemic 
两 个 级 别 的 标题 (<h1> 和 <h2> ) 就 创建 两 级 的 纲要 。 这 种 对 应 关系 与 字 处 理 软件 中 的 纲要 功 
能 类 似 。 比 如 ， 可 以 在 微软 Word 的 文档 结构 图 窗 格 中 看 到 类 似 的 纲要 。 
换 一 个 例子 ， 对 于 下 面 的 标记 : 


<h1i>Level-1 Heading</h1> 
<h2>Level-2 Heading</h2> 
<h2>Level-2 Heading</h2> 
<h3>Level-3 Heading</h3> 
<h2>Level-2 Heading</h2> 


会 生成 如 下 所 示 的 纲要 : 
1. 一 级 标题 
1. 二 级 标题 
2. 二 级 标题 
1. 三 级 标题 
3. 二 级 标题 
同样 ， 没 有 什么 意外 。 
最 后 , 纲要 算法 也 很 聪明 , 能 够 自动 忽略 跳 过 的 级 别 。 例 如 , 如 果 你 写 的 标记 有 点 不 太 规 范 ， 
从 <h1> 直 接 就 跳 到 了 <h3>: 


<h1i>Level-1 Heading</h1> 
<h2>Level-2 Heading</h2> 
<h1i>Level-1 Heading</h1> 
<h3>Level-3 Heading</h3> 
<h2>Level-2 Heading</h2> 


那 会 得 到 如 下 纲要 : 
1. 一 级 标题 

1. 二 级 标题 
2. 一 级 标题 

1. 三 级 标题 

2. 二 级 标题 
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这 样 ， 根 据 其 文本 中 的 位 置 ， 本 来 的 三 级 标题 与 二 级 标题 放 在 了 同一 层次 上 。 表 面 上 看 ， 这 
与 浏览 器 喜欢 干 的 自动 纠 错 类 似 , 但 实际 上 这 样 处 理 有 特殊 的 原因 。 在 某 些 情况 下 ， 网 页 可 能 是 
由 很 多 独立 的 部 分 拼 起 来 的 一 一 例如 ,可 能 会 包含 在 其 他 站 点 上 发 布 的 一 篇 文章 。 此 时 ， 衣 人 内 
容 的 标题 级 别 很 可 能 与 网 页 其 他 部 分 不 会 完美 地 匹配 。 但 由 于 纲要 算法 可 以 消除 这 些 差 异 , 这 种 
问题 自然 也 就 不 是 问题 了 。 


2.5.3 ”分 块 元 素 


分 块 元 素 ( sectioning element ) 是 指 那些 在 页 面 中 创建 新 的 、 舱 套 纲 要 的 元 素 。 这 些 元 素 有 
<article> “aside> <nav> 和 <section>。 要 理解 分 块 元 素 的 作用 ,可 以 想象 一 个 包含 两 个 carticle> 
元 素 的 页 面 。 因 为 <article> 是 一 个 分 块 元 素 ， 所 以 这 个 页 面 中 (至少 ) 有 3 个 纲要 : 整个 页 面 有 
一 个 纲要 、 每 篇 文章 有 一 个 垦 套 的 纲要 。 

为 了 进一步 弄 清楚 到 底 是 什么 状况 ,我 们 来 看 一 看 用 HTML5 改 造 之 后 的 启示 录 文 章 页 面 : 

<body> 

<article> 


<header> 
<h1>How the World Could End</h1> 









































</header> 
«div class="Content"> 
<h2>Mayan Doomsday</h2> 
<h2>Robot Takeover</h2> 
<h2>Unexplained Singularity</h2> 
<h2>Runaway Climate Change</h2> 
<h2>Global Epidemic</h2> 
</div> 
</article> 
<footer> 
</footer> 
</body> 
把 这 些 标 记 复制 到 http://gsnedders.html5.org/outliner 中 ， 可 以 看 到 下 面 的 结 
1. Untitled Section 
1. How the World Could End 
1. Mayan Doomsday 
2. Robot Takeover 
3. Unexplained Singularity 
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4. Runaway Climate Change 
5. Global Epidemic 

这 个 纲要 开始 于 一 个 无 标题 的 区 块 ( Untitled Section )， 也 就 是 最 上 层 的 <body> 元 素 。 然 后 ， 
xarticle> 元 素 开 始 一 个 新 的 般 套 的 纲要 ， 其 中 包含 一 个 ch1> 元 素 和 几 个 <h2> 元 素 。 

有 时 候 ，Untitled Section 意 味 着 一 个 错误 。 尽 管 caside> 和 <nav> 元 素 可 以 不 带 标题 ,但 
xarticle> 和 <section> 则 万 万 不 可 。 拿 前 面 的 例子 来 说 ， 无 标题 的 区 块 是 页 面 中 的 主 区 块 ， 属 于 
<body> 元 素 。 因 为 页 面 只 包含 一 个 carticle>, 所 以 页 面 本身 没 有 必要 再 单独 带 一 个 标题 ,出 现 这 
个 Untitled Section 也 没有 办 法 ， 你 可 以 忽略 它 。 

现在 ， 再 来 看 一 个 复杂 一 点 的 例子 ， 比 如 带 有 导航 侧 边栏 的 启示 录 站 点 〈 人 参见 2.4 节 )。 把 相 
应 的 标记 放 到 纲要 生成 器 中 ， 可 以 得 到 如 下 结 

1. Apocalypse Today 

1. Untitled Section 
1. Articles 
2. About Us 
2. How the World Could End 
1. Mayan Doomsday 
2. Robot Takeover 
3. Untitled Section 




















4. Unexplained Singularity 
3. Runaway Climate Change 
6. Global Epidemic 
这 一 次 , 标记 中 包含 两 个 分 块 元 素 ， 因 此 就 有 两 个 嵌 套 的 纲要 : 一 个 属于 侧 边栏 ， 另 一 个 属 
于 文 草 。 此 外 ， 也 有 两 个 无 标题 区 块 ， 但 都 是 合乎 规范 的 一 一 第 一 个 是 侧 边 栏 的 caside> 元 素 ， 
第 二 个 是 文章 中 醒目 引文 的 caside> 元 素 。 

















注意 ”除了 分 块 元 素 之 外 ， 还 有 一 些 元 素 被 称 作 区 块根 ( section root )。 这 些 元 素 不 是 从 已 有 纲 
要 向 下 分 支 ， 而 是 产生 自己 的 纲要 ， 但 不 会 出 现在 包含 页 面 的 主 纲要 视图 中 。 上 比如 包含 
网 页 内 容 的 <body> 元 素 就 是 一 个 区 块根 ， 这 当然 合理 。 但 HTML5 还 把 下 列 元 素 视 为 区 块 
根 : <blockquote>、<td>、<fieldset>、<figure> 和 <details>。 


分 块 元 素 对 复杂 页 面 的 意义 
分 块 对 于 联合 ( syndication ) 和 聚合 ( aggregation ) 都 有 很 大 意义 ， 这 两 种 方式 都 是 从 一 
个 页 面 中 取得 内 容 ， 然 后 注入 到 另 一 个 页 面 的 技术 。 
例如 ,设想 有 一 个 网 页 ， 包含 一 些 文章 的 节选 内 容 , 而 这 些 内 容 都 来 自 另外 一 个 网 站 。 假 
设 这 个 网 页 本 身 有 很 深 的 标题 庶 套 结构 ， 而 在 这 个 嵌 套 结构 的 菜 个 地 方 一 一 比如 在 一 个 <h4> 
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标题 下 面 一 一 有 一 篇 从 其 他 网 站 抓 来 的 文章 。 

在 传统 的 HTML 中 ， 我们 希望 抓 来 的 文章 中 的 一 级 标题 使 用 ch5> 元 素 ， 因 为 它 被 谋 套 在 
<h4> 下 方 。 可 是 ， 这 篇 文章 的 结构 本 来 是 针对 其 他 网 站 设计 的 ， 而 原来 的 页 面 没有 什么 误 套 ， 
因此 其 标题 很 可 能 从 kh2> 甚 至 从 <h1> 开 始 。 虽 然 这 不 影响 页 面 显 示 ， 但 却 打 乱 了 标题 层级 ， 特 
别 是 对 屏幕 阅读 器 、 搜 索引 擎 以 及 其 他 页 面 处 理工 具 ， 则 会 造成 更 大 的 困难 。 

而 在 HTML5 中 , 这 个 页 面 根本 不 是 问题 。 只 要 你 把 这 篇 文章 误 套 在 一 个 <article> 元 素 中 ， 
那么 被 抓 过 来 的 内 容 就 会 变 成 它 自己 误 套 纲要 的 一 部 分 。 而 这 个 纲要 可 以 从 任意 级 别 的 标题 开 
始 ， 几 级 标题 都 无 所 谓 。 真 正 重要 的 是 标题 在 包含 文档 中 的 位 置 。 因 此 ， 如 果 这 个 <article> 
元 素 排 在 <h4> 后 面 ， 那 么 文章 中 的 第 一 级 标题 从 逻 辑 上 就 像 <h5> 一 样 ， 第 二 级 标题 从 还 辑 上 就 
像 <h6> 一 样 ， 以 此 类 推 。 

最 后 的 结论 是 : HIML5 有 一 个 讲究 逻辑 的 纲要 机 制 ， 让 组 合 文档 变 得 更 容易 。 在 这 种 纲 
要 机 制 下 ， 标 题 的 位 置 变 得 更 加 重要 ， 而 实际 的 级 别 则 没有 那么 重要 了 。 这 样 ， 可 以 免得 你 搬 
起 石头 砸 到 自己 的 脚 。 


2.5.4 解决 一 个 纲要 问题 


到 现在 为 止 , 你 已 经 看 到 本 章 的 示例 ,也 看 到 了 这 些 示 例 生 成 的 纲要 。 而 且 , 你 看 到 的 纲要 
也 都 非常 符合 规范 。 可 是 ， 有 时 候 也 会 出 现 一 个 问题 。 比 如 ， 你 创建 了 以 下 页 面 结构 : 
<body> 


<article> 
<h1i>Natural Wonders to Visit Before You Die</h1> 





<h2>In North America</h2> 
<h3>The Grand Canyon</h3> 
<h3>Yellowstone National Park</h3> 
<h2>In the Rest of the World</h2> 
<aside>...</aside> 
<h3>Galapagos Islands</h3> 
<h3>The Swiss Alps</h3> 
</article> 
</body> 
然后 ， 你 觉得 这 个 页 面 的 纲要 应 该 是 这 样 的 : 
1. Untitled Section for the <body> 
1. Natural Wonders to Visit Before You Die 
1. In North America 
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1. The Grand Canyon 

2. Yellowstone National Park 
2. In the Rest ofthe World 
3. Untitled Section for the «aside> 





1. Galapagos Islands 
2. The Swiss Alps 
但 实际 的 纲要 却 是 这 样 的 : 
1. Untitled Section for the <body> 
1. Natural Wonders to Visit Before You Die 
1. In North America 
1. The Grand Canyon 
2. Yellowstone National Park 
2. In the Rest ofthe World 
3. Untitled Section for the «aside> 





4. Galapagos Islands 
5. The Swiss Alps 
不 知 怎么 地 , <h2> 后 面 多 出 来 的 那个 caside> 把 它 后 面 的 两 个 ch3> 元 素 都 带 了 出 来 , 让 它们 在 
逻辑 上 跟 ch2> 元 素 排 在 了 同一 层次 上 。 这 显然 不 是 你 想 要 的 结果 。 
为 了 解决 这 个 问题 ， 首 先 需 要 理解 HTML5 的 纲要 机 制 ， 即 每 次 遇 到 编号 标题 元 素 (<h1>、 
<h2>、<h3>， 等 等 )， 只 要 该 元 素 不 在 某 个 区 块 顶 部 ， 就 会 为 它 自动 创建 一 个 新 的 区 块 。 
对 这 个 例子 来 说 ， 纲 要 机 制 对 一 开头 的 <h1> 元 素 什么 都 不 做 ， 因 为 它 位 于 <article> 区 块 的 
顶部 。 但 纲要 算法 却 会 为 接 下 来 的 ch2> 和 <h3> 创 建新 的 区 块 ， 就 好 像 你 写 了 如 下 标记 一 样 : 


<body> 
<article> 
<h1>Natural Wonders to Visit Before You Die</h1> 














<section> 
<h2>In North America</h2> 
<section> 
<h3>The Grand Canyon</h3> 
</section> 
<section> 
<h3>Yellowstone National Park</h3> 
</section> 
</section> 


<section> 
<h2>In the Rest of the World</h2> 
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</section> 
<aside>...</aside> 
<sectiony 
<h3>Galapagos Islands</h3> 
c/section> 
<section> 
<h3>The Swiss Alps</h3> 
c/section> 
</article> 

</body> 

多 数 情况 下 ， 这 些 自 动 创建 的 区 块 不 是 问题 。 事实 上 , 这些 区 块 通常 还 很 有 用 ， 因 为 这 样 可 
以 确保 未 正确 编号 的 标题 仍然 能 排 在 正确 的 纲要 级 别 上 。 但 这 样 做 的 代价 就 是 偶尔 会 出 现 小 差 
错 ， 就 像 我 们 这 个 例子 一 样 。 

从 生成 的 纲要 来 看 ， 一 开始 都 没有 问题 。 顶 部 的 <h1> 自 己 一 个 级 别 ( 因为 它 已 经 在 一 个 
xarticle> 里 面 了 ), 接 下 来 会 为 第 一 个 ch2> 元 素 创 建 一 个 子 区 块 ,然后 再 为 这 个 子 区 块 里 面 的 <h3> 
分 别 创建 各 自 的 子 区 块 ， 以 此 类 推 。 当 纲要 算法 磁 到 <aside> 元 素 时 ， 问 题 就 出 现 了 。 既 然 碰 到 
了 xaside>， 那 就 说 明 要 关闭 当前 为 ch2> 创 建 的 子 区 块 了 。 而 关闭 这 个 子 区 块 之 后 ， 再 为 <aside> 
后 面 的 <h3> 创 建 子 区 块 ， 就 会 导致 它们 在 逻辑 上 与 前 面 的 <h2> 在 纲要 中 处 于 同一 个 层次 上 。 

为 了 纠正 这 个 问题 ， 需 要 通过 自己 定义 区 块 和 子 区 块 , 来 代替 纲要 机 制 的 自动 创建 行为 。 对 
我 们 这 个 例子 来 说 ， 就 是 要 避免 第 二 个 ch2> 区 块 被 过 早 地 关闭 。 在 标记 中 明确 为 该 <ch2> 定 义 一 个 
区 块 即 可 解决 问题 : 

<body> 


<article> 
<h1i>Natural Wonders to Visit Before You Die</h1> 






















































































<h2>In North America</h2> 
<h3>The Grand Canyon</h3> 
<h3>Yellowstone National Park</h3> 


<sectiony 
<h2>In the Rest of the World</h2> 
2 
<h3>Galapagos Islands</h3> 
<h3>The Swiss Alps</h3> 
</section> 


</article> 
</body> 
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这 样 ， 纲 要 算法 就 不 必 再 为 第 二 个 <h2> 自 动 创建 区 块 了 ， 因 而 也 就 避免 了 在 它 发 现 <asidey> 
时 去 关闭 该 区 块 的 风险 。 虽然 也 可 以 为 文档 中 的 所 有 标题 都 定义 区 块 , 但 没有 必要 因此 把 标记 搞 
乱 ， 毕 竞 像 这 样 修改 一 个 地 方 就 可 以 解决 问题 。 








注意 另 一 个 办 法 是 用 cdiv> 替 换 caside>。 因 为 <div> 不 是 分 块 元 素 ， 因 此 不 会 导致 前 面 的 区 块 
意外 关闭 。 


使 用 caside> 元 素 并 不 会 经 常 导 致 这 种 问题 。 比 如 ， 前 面 文章 中 使 用 caside> 包 含 醒 上 日 引文 ， 
不 就 挺 好 嘛 ; 那 是 因为 caside> 正 好 在 两 个 ch2> 元 素 之 间 。 可 是 ， 假 如 你 不 小 心 在 两 个 不 同 级 别 
的 标题 之 间 插 入 了 一 个 分 块 元 素 ， 那 就 要 检查 一 下 纲要 ， 看 这 样 干 是 不 是 说 得 过 去 。 








提示 “如 果 你 对 本 节 讨 论 的 所 有 纲要 相关 的 概念 还 有 点 迷糊 ， 不 必 担 心 。 说 老实 话 ， 纲 要 这 件 
事 是 很 多 Web 开 发 人 员 都 不 会 十 分 关心 的 (至 少 目前 是 这 样 ) 最 好 是 把 HTML5 的 纲要 机 
制 当成 一 种 质量 保障 工具 ， 它 有 时 候 可 以 帮 上 你 的 忙 。 通 过 在 纲要 生成 器 (参见 2.5.1 节 
给 出 的 工具 ) 中 查看 自己 的 标记 ， 有 可 能 发 现 其 他 问题 导致 的 错误 ， 而 且 能 够 确保 你 正 
确 地 使 用 语义 元 素 。 
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第 3 共 


理 





编写 更 有 意义 的 标记 





一 章 , 我 们 了 解 了 HTML5 的 语义 元 素 。 通 过 使 用 这 些 语义 元 素 , 可 以 为 网 页 创建 清晰 、 
有 逻辑 的 结构 ， 而 且 能 够 适应 未 来 更 聪明 的 浏览 器 、 搜 索引 擎 和 辅助 设备 。 
不 过 ,关于 语义 的 故事 并 没有 讲 完 。 语 义 就 是 为 标记 赋予 某 种 意义 ， 然 后 可 以 在 不 同 的 标记 
中 放 入 不 同 的 信息 。 第 2 章 谈 到 的 语义 元 素 完全 是 页 面 结构 方面 的 ， 即 用 它们 传达 页 面 布局 中 大 
一 些 的 内 容 块 及 所 有 区 块 的 用 途 。 但 文本 级 信息 同样 也 有 语义 ,这 样 的 语义 元 素 用 于 描述 较 小 一 
些 的 内 容 片段 。 可 以 使 用 文本 级 语义 元 素 标注 出 重要 的 信息 , 以免 它 们 被 淹没 在 一 望 无 际 的 网 页 
大 海 之 中 。 比 如 ， 可 以 为 名 字 、 地 址 、 活 动 清单 、 产 品 、 处 方 、 餐 馆 评 价 加 注 语义 元 素 。 然 后 ， 
各 种 各 样 的 设备 和 工具 一 一 从 新 潮 的 浏览 器 插件 ， 到 专业 的 搜索 引擎 ， 便 可 各 取 所 需 。 
本 章 ， 我 们 先 来 回顾 一 下 列 人 HTML5 语 言 规范 的 几 个 语义 元 素 。 之 后 ， 你 还 会 学 到 一 些 文 
本 级 语义 元 素 ,， 在 今天 使 用 它们 没有 什么 困难 。 接 下 来 , 我们 会 介绍 几 个 致力 于 解决 文本 级 语义 
问题 的 前 沿 标准 。 换 名 话说, 我们 会 详细 说 一 说 向 数据 ( microdata )， 它 最 初 是 作为 HTML5 规 范 
的 一 部 分 被 提出 来 的 ， 但 现在 已 经 成 了 一 个 独立 的 标准 ， 由 W3C 负 责 管理 和 推进 。 使 用 微 数据 ， 
可 以 让 网 页 和 搜索 结果 的 内 容 更 加 丰富 。 


3.1 回顾 语义 元 素 


我 们 从 页 面 结构 相关 的 元 素 〈( 表 3-1 是 一 个 简单 的 回顾 ) 开始 讨论 语义 是 有 原因 的 。 原 因 也 
很 简单 ， 页 面 结构 容 易 把 握 。 毕 竞 ， 绝 大 多 数 网 站 在 规划 布局 时 ， 都 会 使 用 为 数 不 多 的 几 种 常 
用 设计 元 素 ( 页 眉 、 页 脚 、 侧 边栏 、 菜 单 )， 结 果 网 站 的 布局 一 一 除了 外 观 装饰 有 所 不 同 外 一 一 
都 很 相似 。 
































表 3-1 页面 结构 相关 的 语义 元 素 
元 素 说 明 
<article> ”表示 一 篇 任何 形式 的 文章 ， 即 类 似 新 闻 报 道 、 论 坛 帖子 或 博客 文章 (不 包括 评论 或 作者 简介 ) 等 能 














够 独立 的 内 容 区 块 

<aside> 表示 独立 于 页 面 主 内 容 的 一 个 完整 的 内 容 块 。 例 如 ， 可 以 用 <aside> 创 建 一 个 附注 栏 ， 其 中 包含 与 主 
文章 相关 的 内 容 或 链接 

<figure> 和 表示 一 幅 插 图 。 其 中 <figcaption> 元 素 标注 图 题 (插图 的 标题 ) ,而 <figure> 元 素 标注 <figcaption> 














<figcaptiony ”和 插入 图 片 的 <img> 元 素 。 目 标 是 反映 图 片 与 图 题 之 间 是 关联 的 
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( 续 ) 































































































元 素 说 明 

<footer> 表示 页 面 底部 的 页 脚 '。 通常 是 很 小 的 一 块 内 容 , 包括 小 字号 的 版 权 声 明 、 简 单 的 链接 (比如 About 
Us、Get Support 等 ) 

<header> 表示 增强 型 的 标题 ， 可 以 包含 HTML 标 题 和 其 他 内 容 。 其 他 内 容 可 以 是 标志 、 作 者 署名 或 一 组 指 
向 后 面 内 容 的 导航 链接 

<nav> 表示 页 面 中 重要 的 一 组 链接 。 其 中 的 链接 可 以 指向 当前 页 面 的 主题 , 也 可 以 指向 网 站 的 其 他 页 面 。 
实际 上 ， 一 个 页 面 中 包含 多 个 <nav> 也 很 正常 

<section> 表示 文档 中 的 一 个 区 块 , 或 者 表示 一 组 文档 。<section> 是 一 个 通用 容器 ， 只 有 一 条 规则 : 其 中 的 
内 容 必须 开始 于 一 个 标题 。 应 该 在 其 他 语义 元 素 (如 <article> 和 <aside>) 不 适用 的 情况 下 再 先 
用 <section> 

<main> 表示 页 面 的 主 内 容 。 比 如 ,可 以 使 用 <main> 包 含 <article> 元 素 ,隔离 网 站 的 页 眉 、 页 脚 和 侧 边 栏 。 




















这 个 元 素 是 HTML5.1 新 增 的 








文本 级 语义 可 不 是 一 块 好 踢 的 骨头 。 因 为 人 们 产生 内 容 的 类 型 千差万别 。 如 果 HTML5 为 每 
一 种 可 能 的 内 容 类 型 都 发 明 一 个 元 素 , 那 这 门 语言 中 包含 的 元 素 可 就 数不胜数 了 。 问题 的 复杂 性 
在 于 , 结构 化 的 内 容 是 由 很 多 更 小 的 内 容 片 段 构 成 的 , 而 组 织 这 些 内 容 片 段 的 方式 又 没有 一 定之 
规 。 比如, 要 在 页 面 中 插入 最 简单 的 邮政 地 址 , 都 可 能 需要 好 几 个 元 素 , 比如 <address>、<name>、 
<street>、<postalcode>、<country>， 等 等 。 

HTML5 的 策略 是 双管齐下 。 一 方面 ， 它 只 增强 了 很 少儿 个 文本 级 语义 元 素 ; 另 一 方面 ， 更 
重要 的 是 ，HTML5 支 持 一 个 独立 的 微 数 据 标 准 。 这 个 标准 为 人 们 提供 了 扩展 的 可 能 性 ， 任 何人 
都 可 以 定义 自己 的 信息 ， 在 自己 的 页 面 中 为 信息 添加 标注 。 本 章 会 介绍 这 两 方面 的 主题 。 首 先 ， 
我 们 来 认识 三 个 新 的 文本 级 的 语义 元 素 : <time>、<output> 和 <mark>。 











Vr 




















3.1.1 使 用 <time> 标 注 日 期 和 时 间 


网 页 中 经 常会 出 现 日 期 和 时 间 信 息 。 例 如 ， 绝 大 多 数 博客 文章 的 末尾 都 有 发 表 时 间 。 然 而 ， 
人 们 却 一 直 没 有 标准 的 方式 来 标注 日 期 ， 因 此 其 他 程序 ( 如 搜索 引擎 ) 也 不 容易 提取 这 些 信 息 ， 
基本 上 都 是 靠 猿 。 好 了 ， 现 在 <time> 元 素 可 以 解决 这 个 问题 。 通 过 它 可 以 标注 日 期 、 时 间或 日 期 
与 时 间 的 组 合 。 先 看 一 个 例子 : 


The party starts <time>2014-03-21</time>. 


注意 ”用 <time> 元 素来 标注 ( 不 包含 时 间 的 ) 日 期 似乎 有 点 违反 直觉 ,我 告诉 你 吧 , 这 只 是 HTML5 
的 古怪 行为 之 一 。 更 恰当 的 元 素 显然 应 该 是 cdatetime>， 但 他 们 硬是 不 用 。 


<time> 元 素 在 这 里 要 扮演 两 个 角色 。 首先 , 它 表示 日 期 和 时 间 位 于 标记 中 的 哪个 地 方 。 其 次 ， 
它 以 任何 软件 程序 都 能 理解 的 方式 提供 日 期 和 时 间 。 前 面 的 例子 符合 第 二 个 角色 的 要 求 , 使 用 了 


























注 1: 根据 HTML5 规 范 ，<footer> 元 素 不 仅 可 以 用 于 页 面 的 页 脚 ， 也 可 以 用 于 文章 中 的 文 脚 。( 译 者 注 ) 





























3.1 回顾 语义 元 素 | 65 





通用 的 日 期 格式 ， 即 按 年 月 日 这 个 顺序 ,年 4 位 数 、 月 和 日 均 为 2 位 数 ， 分 隔 符 为 短 划 线 。 换 句 话 
说 ,日 期 的 格式 如 下 : 
YYYY-MM-DD 
不 过 ,对 于 浏览 网 页 的 人 , 你 可 以 随便 采用 任何 格式 来 显示 日 期 。 实际 上 , 任何 文本 形式 也 
都 是 允许 的 ， 只 要 你 在 datetime 属 性 中 提供 计算 机 能 看 懂 的 通用 格式 的 日 期 就 行 ， 比 如 : 
The party starts <time datetime="2014-03-21">March 21<sup>st</sup></time>. 
在 浏览 需 中 的 效果 如 下 所 示 : 
The party starts March 21°. 
对 于 时 间 部 分 ，<time> 也 有 类 似 的 规则 ， 标 准 的 时 间 格 式 如 下 : 
HH:MM 
首先 是 2 位 数 的 小 时 ( 24 小 时 制 )， 然 后 是 2 位 数 的 分 钟 。 比 如 : 
Parties start every night at <time datetime="16:30">4:30 p.m.</time>. 
最 后 ， 组 合 以 上 两 个 规则 可 以 指定 具体 日 期 和 时 间 ， 日 期 在 前 ， 空 一 个 格 ， 时 间 在 后 : 


The party starts <time datetime="2014-03-21 16:30">March 21<sup>st</sup> 
at 4:30 p.m.</time>. 























注意 ”最 初 ，ktime> 元 素 要 求 用 一 种 稍 有 不 同 的 格式 组 合 日 期 和 时 间 。 区 别 在 于 不 用 空格 分 隔 
符 ， 而 用 大 写 的 T (表示 time )， 比 如 2014-03-21T16:30。 这 种 格式 还 可 以 用 ， 因 此 在 别人 
的 网 页 也 可 能 出 现 。 


在 组 合 日 期 和 时 间 的 情况 下 ,有 时 候 还 需要 后 缀 时 区 信息 。 比 如 ,纽约 在 东 五 区 , 即 UTC-5:00。 
(关于 时 区 划分 ， 请 参见 http://en.wikipedia.org/wiki/Time_zone。) 要 表示 纽约 时 间 下 午 4:30， 应 该 
使 用 如 下 标记 : 


The party starts <time datetime="2014-03-21 16:30-05:00">March 21<sup>st</sup> 
at 4:30 p.m.</time>. 


这 样 ,看 你 的 网 页 的 人 , 能 看 到 他 们 想 看 到 的 格式 ,而 搜索 机 器 人 和 其 他 软件 则 能 看 到 它们 
可 以 处 理 的 值 ， 而 且 毫 无 歧义 。 

另外 ，<time> 还 有 一 个 pubdate 属 性 。 如 果 当 前 内 容 (例如 ctime> 元 素 所 在 的 <article> ) 对 
应 一 个 发 表 日 期 ， 可 以 使 用 这 个 属性 。 下 面 就 是 一 个 例子 : 


Published on <time datetime="2014-03-21”pubdate>March 31, 2014</time>. 


























注意 ”因为 <time> 元 素 纯粹 是 信息 性 的 ， 没有 任何 附加 的 样式 ， 所 以 可 以 在 任何 浏览 器 中 使 用 。 
不 必 担 心 兼容 性 问题 ,不 过 ,假如 你 想 给 <time> 元 素 添加 点 样式 ,需要 针对 Internet Explorer 
使 用 2.3 节 介绍 的 方法 。 
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3.1.2 ”使 用 coutput> 标 注 JavaScript 返 回 值 


HTML5 还 包含 一 个 语义 元 素 <output>， 它 能 使 某 种 JavaScript 驱 动 的 页 面 更 加 清晰 。 实 际 上 ， 
这 个 元 素 就 是 一 个 占 位 符 ， 用 于 展示 一 小 段 计算 后 的 信息 。 

例如 ,假设 你 要 创建 如 图 3-1 所 示 的 一 个 页 面 。 用 户 可 以 在 这 个 页 面 中 输入 某 些 信息 。 然 后 
用 脚本 取得 这 些 信息 ， 进 行 计算 ， 并 将 结果 显示 在 下 面 。 

通常 的 做 法 是 给 占 位 符 指 定 一 个 ID 属性 ， 这 样 JavaScript 代 码 就 可 以 在 计算 时 找到 它 。Web 
开发 人 员 一 般 将 <span> 元 素 用 做 占 位 符 ， 而 唯一 的 问题 就 是 该 元 素 不 提供 任何 语义 : 

<p>Your BMI: <span id="result"></span></p> 

以 下 则 是 使 用 HTML5 的 更 有 意义 的 版 本 : 

<p>Your BMI: 《output id="result"></output></p> 

实际 的 JavaScript 代 码 无 需 任何 改变 ， 因 为 它 只 根据 也 属性 查找 元 素 ， 不 考虑 元 素 类 型 


var resultElement = document.getElementById("result"); 


























注意 ”在 使 用 <output> 之 前 ， 别 忘 了 像 2.3 节 介绍 的 那样 为 Internet Explorer 包 含 相 应 的 脚本 。 否 
则 ， 在 旧版 本 的 IE (IE8 及 更 早 版 本 ) 中 无 法 通过 JavaScript 来 访问 该 元 素 。 


























| [EEC 图 3-1: 这 是 一 个 由 来 已 久 的 设计 模式 ， 输 入 数 
aero ” 一 字 ， 单 击 按钮 ， 就 可 以 得 到 答案 
CQ BmiCalculator.htm > 


Body Mass Index Calculator 


Height: 7 feet 
1 inches 
Weight: 230 pounds 


Your BMI: 22.4 





BMI Weight Status 





Below 18.5 Underweight 





18.5—24.9 Normal 





25.0—29.9 Overweight 














30.0 and Above | Obese 





























3.1 回顾 语义 元 素 | 67 




















常 ， 这 种 页 面 都 会 采用 一 个 <form> 元 素 。 在 这 个 例子 中 ， 需 要 包含 3 个 文本 框 ， 以 便 用 户 


<form action="#" id="bmiCalculator"> 
<label for="feet inches">Height:</label> 
<input name="feet"> feet<br> 
<input name="inches"> inches<br> 


<label for="pounds">Weight:</label> 
<input name="pounds"> pounds<br><br> 
/form> 
如 果 你 想 让 自己 的 <output> 元 素 变 得 更 聪明 一 些 , 可 以 为 它 添加 form 和 for 属 性 , 前 者 的 值 是 
包含 相关 控件 的 表单 ID ， 后 者 的 值 是 以 空格 分 隔 的 相关 控件 的 ID。 比 如 ， 下 面 就 是 一 个 例子 : 


<p>Your BMI: <output id="result" form="bmiCalculator"for="feet inches pounds"> 
</output></p> 


这 些 属性 实际 上 什么 也 不 干 ， 唯 一 的 用 处 就 是 表明 <output> 从 哪些 控件 获取 结果 这 一 信息 。 
不 过 , 你 肯定 会 因为 考虑 到 了 语义 而 获得 加 分 。 如 果 其 他 人 需要 编辑 你 的 页 面 , 那 这 些 属性 可 以 
帮 他 们 理 清 思路 。 






























































提示 。 如果 你 对 表单 还 不 很 熟悉 ,第 4 章 会 详细 介绍 。 假如 你 对 JavaScript 还 不 如 你 对 世界 语 了 解 
得 多 ， 那 可 以 先 通 过 附录 B 复 习 一 下 。 而 假如 你 想 自己 试 一 试 这 个 页 面 ， 可 以 在 
http://prosetech.com/html5 中 找到 所 有 示例 页 面 。 


3.1.3 ”使 用 cmark> 标 注 突 显 文 本 


<mark> 元 素 用 于 标注 一 段 文本 ， 这 段 文本 会 突出 显示 。 在 需要 引用 其 他 人 的 内 容 ， 而 你 想 引 
起 别人 注意 时 ， 就 可 以 使 用 cmark> 元 素 : 


<p>In 2009, Facebook made a bold grab to own everyone's content, 
<em>forever</em>. This is the text they put in their terms of service:</p> 
<blockquote>You hereby grant Facebook an <mark>irrevocable, perpetual, 
non-exclusive, transferable, fully paid, worldwide license</mark> (with the 
right to sublicense) to <mark>use, copy, publish</mark>, stream, store, 
retain, publicly perform or display, transmit, scan, reformat, modify, edit, 
frame, translate, excerpt, adapt, create derivative works and distribute 
(through multiple tiers), <mark>any user content you post</mark> 








</blockquote> 
如 图 3-2 所 示 ， 浏 览 器 会 给 cmark> 中 的 文本 添加 黄色 背景 。 
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[eI 旺 刻 训 | 图 3-2: 在 这 个 例子 中 ， 




















ew 会 ] mark.html D7 3X <mark> Example x lm {mn Ve 203 我 们 使 用 <mark> 元 素 突 
^ 一 En、 
In 2009. Facebook made a bold grab to own everyone's content. forever. This ls the text 出 显示 了 3 | 用 的 一 段 话 
they put in their terms of service: 中 的 重要 细节 


You hereby grant Facebook an irrevocable. perpetual. non-exclusive. 
transferable. fully paid. worldwide license (with the right to sublicense) to Use. 
copy. publish. stream, store. retain, publicly perform or display. transmit. scan., 
reformat. modify. edit. frame, translate, excerpt. adapt. create derivative works 
and distribute (through multiple tiers). any user content you post on or in 
connection with the Facebook Service or the promotion thereof subject only to 
your privacy settings or enable a user to host 


IN 


Fortunately. they've since backtracked and weakened the language considerably. Here's the 
relevant secticn today: 


You own all of the content and information you post on Facebook. and you can 
control how it is shared through your privacy and application settings. In 
addition: 1. For content that 1s covered by intellectual property rights. like 
photos and videos ("IP content"). you specifically give us the following 
permission., subject to your privacy and application settings: you grant us anon- 
exclusive. transferable, sub-licensable. royalty-free. worldwide license to use 
any content that you post on or in connection with Facebook. This license ends 
when you delete your content or your account unless your content has been 
shared with others. and they have not deleted it. 



































也 可 以 使 用 <mark> 标 注重 要 的 内 容 或 关键 字 一 一 就 像 搜索 引擎 在 搜索 结果 中 显示 匹配 的 文 
本 那样 ， 还 可 以 与 del> (删除 的 文本 ) 和 <ins> (插入 的 文本 ) 组 合 使 用 ， 以 标注 文档 的 变化 。 

实话 实说 ，<mark> 元 素 其 实 并 不 十 分 必要 。HTML5 规 范 认为 它 是 一 个 语义 元 素 ， 但 实际 上 
它 更 多 地 则 是 被 用 于 表现 目的 。 默 认 情 况 下 ， 被 标注 的 文本 会 带 有 浅黄 色 背 景 ( 见 图 3-2 )， 不 过 
当然 可 以 通过 样式 表 规 则 为 它 应 用 不 同 的 样式 。 


提示 <mark3 元 素 的 目的 并 不 在 于 样式 。 毕 竞 ， 突 出 显示 文本 的 方式 已 经 有 很 多 了 。 因 此 ， 应 
该 坚持 只 用 <mark>( 结合 你 想 使 用 的 任意 CSS 格 式 ) 来 传达 适当 的 语义 。 这 里 有 一 条 经 验 ， 
那 就 是 使 用 mark> 来 吸引 人 注意 那些 变 得 很 重要 的 文本 。 比 如 ， 关 于 写作 该 文本 的 讨论 ， 
或 者 它 是 用 户 应 该 执行 的 任务 。 


即使 你 想 治 用 默认 的 黄色 背景 ， 也 应 该 为 不 支持 HTML5 的 浏览 器 添加 后 备 样式 表 。 以 下 就 
是 相应 的 样式 规则 : 


mark { 


background-color: yellow; 
color: black; 


} 


为 了 让 <mark> 在 旧版 本 的 下 中 能 够 正常 获得 样式 ， 还 应 该 像 2.3 节 介绍 的 包含 相应 的 脚本 
文件 。 
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3.2 ”其 他 语义 标准 


此 时 ， 你 可 能 会 想 ，HTML 中 还 缺少 很 多 语义 元 素 。 没 错 ， 现 在 可 以 标注 日 期 、 突 出 显示 文 
本 , 但 对 其 他 常见 的 信息 怎么 办 ， 比 如 ， 名字、 地 址 、 企 业 名 录 、 产 品 说 明 、 个 人 简介 ? HTML5 
有 意 不 在 这 方面 投入 精力 ， 因 为 其 制定 者 不 想 把 这 门 语言 过 分 地 特殊 化 ,否则 就 避免 不 了 “有 人 
欢喜 有 人 忧 ”的 怪圈 。 如 果真 想 在 语义 方面 有 更 大 的 作为 ， 就 必须 跳出 HTML5 语 言 核心 的 范畴 ， 
去 寻找 几 种 更 适合 你 网 页 的 标准 。 
通过 标记 巧妙 地 表达 语义 并 不 是 什么 新 点 子 。 事 实 上 ， 早 在 HTML5 还 是 一 个 幻想 ， 存 在 于 
WHATWG 编 辑 Ian Hickson 的 大 脑 中 的 时 候 ， 就 有 非常 多 的 Web 开 发 人 员 大 声 疾 呼 ， 要 求 为 他 们 
提供 更 有 意义 的 标记 。 他 们 的 目标 也 不 尽 相 同 ， 有 些 人 希望 提高 无 障碍 性 ， 有 些 人 打算 要 进行 数 
据 挖掘 ， 而 还 有 一 些 人 仅仅 是 希望 自己 的 简历 多 一 个 内 交点 。 不 过 ,所 有 这 些 人 在 标准 HTML 语 
言 中 都 找 不 到 自己 想 要 的 标记 。 由 此 ， 一 些 新 标准 的 应 运 而 生 也 就 不 足 为 奇 了 。 
接 下 来 几 节 ,我 们 介绍 4 种 这 样 的 标准 。 首 先 ， 就 是 ARIA， 它 致力 于 提升 屏幕 阅读 器 中 的 无 
障碍 性 。 其 次 ,我 们 要 看 一 下 另外 三 种 并 存 的 手段 ， 它 们 用 于 描述 不 同 的 内 容 ， 比 如 联系 人 、 地 
址 、 企 业 名 录 或 其 他 各 种 HTML 页面 可 能 出 现 的 内 容 。 




























































































3.2.1 ARIA 

















ARIA (Accessible Rich Internet Application ， 无 障碍 富 因特网 应 用 ) 是 一 个 还 在 制定 中 的 标 
准 ， 它 规定 了 在 任意 HTML 元 素 上 使 用 的 属性 ， 而 通过 这 些 属 性 可 以 为 屏幕 阅读 器 提供 额外 的 信 
上 息 。 例 如 ，ARIA 中 规定 了 一 个 role 属 性 ， 表 示 所 在 元 素 的 用 途 。 下 面 就 以 一 个 表示 页 眉 的 <div> 
元 素 为 例 : 

<div class="header"> 
通过 为 其 指定 值 为 banner 的 zole 属 性 ， 可 以 告诉 屏幕 阅读 器 它 的 用 途 是 保存 横幅 广告 : 

<div class="header" role="banner"> 

当然 ， 我 们 上 一 章 刚 刚 学 过 ，HTML5 为 标注 页 眉 提 供 了 一 个 语义 元 素 。 因 此 ， 这 时 候 最 合 
适 的 方式 莫 过 于 : 

<header role="banner"> 

这 个 例子 说 明了 两 方面 问题 ， 首 先 ，ARIA 规 定 了 一 些 推荐 的 角色 名 。( 要 了 解 所 有 角色 名 ， 
请 参考 规范 中 相应 的 部 分 : http://tinyurl.com/roles-aria。) 其 次 ， 部 分 ARIA 与 新 HTML5 语 义 元 素 
重复 一 一 这 是 合情合理 的 ， 因 为 ARIA 早 于 HTML5。 不 过 ， 重 复 也 不 是 完全 重复 。 比 如 ， 有 些 角 
色 名 在 HTML5 中 确实 也 出 现 了 ( 像 “banner” 和 “article”)， 而 有 些 则 可 能 在 将 来 才 会 出 现 ( 如 
“toolbar” 和 “search”)。 

ARIA 还 针对 HTML 表 单 定 义 了 属性 。 文 本 框 的 aria-required 属 性 表示 用 户 必须 输入 值 。 而 文 
本 框 的 aria-invalid 属 性 表示 当前 值 不 正确 。 这 些 属 性 可 以 让 屏幕 阅读 器 用 户 ， 特 别 是 视力 不 好 
的 用 户 , 不 会 因为 看 不 到 提示 信息 ( 比如 必 填 字段 旁 的 星 号 , 或 内 烁 的 红色 错误 图 标 ) 而 受 影响 。 
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为 了 恰当 地 采用 ARIA ， 需 要 学 习 标 准 ， 也 要 花 时 间 评 审 自己 的 标记 。 对 于 是 和 否 值得 为 此 投 
入 ，Web 开 发 人 员 的 看 法 不 一 。 因 为 这 个 标准 尚未 制定 完成 , 而 HTMLS 又 提供 了 一 些 类似 的 语义 
元 素 ， 且 用 起 来 省 事 儿 不 少 。 不 过 ,假如 你 真 的 想 创 建 一 个 可 以 无 障碍 访问 的 网 站 ， 必 须 既 要 考 
虑 ARIA， 又 要 考虑 HTML5。 因 为 屏幕 阅读 器 支持 ARIA， 不 支持 HTML5。 











注意 要 了 解 有 关 ARIA (全 名 是 WAI-ARIA， 因 为 它 是 由 Web Accessibility Initiative 工 作 组 负责 
制定 的 ) 的 更 多 信息 ， 请 参考 其 规范 : http://www.w3.org/TR/wai-aria/。 


3.2.2 RDFa 


RDFa (Resource Description Framework,， 资源 描述 框架 ) 也 是 一 种 使 用 属性 向 网 页 中 共和 人 详 
细 信 息 的 标准 。 与 本 章 讨论 的 其 他 方式 不 同 ，RDFa 有 一 个 明显 的 优点 : 它 是 一 个 稳定 不 变 的 标 
准 。RDFa 也 有 两 个 明显 的 缺点 。 首 先 ，RDFa 最 初 是 为 XHTML 而 非 HTMLS 设 计 的 ， 因 此 关于 严 
格 的 RDFa 与 松散 的 HTML5 如 何 混 写 的 争论 一 直 不 绝 于 耳 。 其 次 ，RDFa 很 复杂 ， 骨 人 RDFa 元 数 
据 后 的 网 页 比 最 初 要 长 得 多 ， 而 且 显 得 很 笨重 。 由 于 这 种 复杂 性 ，RDFa“ 藏 污 纳 折 ”的 可 能 性 
就 增 大 了 。 根 据 谷 歌 的 调查 ， 其 包含 错误 的 概率 大 约 高 三 倍 。 

本 章 不 会 详细 讨论 RDFa (除了 下 一 节 介 绍 的 与 HIML5 密 切 相 关 的 微 格式 )， 不 过 假如 你 希 
望 了 解 更 多 信息 ， 可 以 在 Wikipedia 上 看 到 完整 的 介绍 : http:/en.wikipedia.org/wikiRDFa。 或 者 ， 
也 可 以 参考 3.4.1 节 介绍 的 Google Rich Snippets， 其 中 所 有 示例 都 有 对 应 的 RDFa 版 本 。 


3.2.3” 微 格式 


微 格式 (Microformats ) 是 一 种 在 网 页 中 艇 人 元 数据 的 简单 而 又 比较 合理 的 方式 。 微 格式 并 
没有 想 成 为 任何 官方 标准 。 相 反 , 它 是 一 组 统一 的 宽松 的 约定 ,这 些 约定 有 助 于 网 页 之 间 共 享 结 
构 化 信息 ， 但 又 不 会 导致 像 采用 RDFa 那 样 复杂 。 微 格式 因此 获得 了 巨大 的 成 功 ， 最 近 的 一 次 调 
查 显示 ， 在 包含 丰富 元 数据 的 页 面 中 ， 有 70% 都 基于 微 格式 。 

微 格式 的 应 用 方式 比较 新 蜂 ， 它 们 附加 在 通常 用 于 添加 样式 的 class 属 性 上 。 你 可 以 根据 数 
据 的 类 型 ,使 用 某 些 标准 的 样式 名 来 标注 数据 。 然 后 ， 其 他 程序 可 以 读 取 你 的 标记 ,提取 数据 并 
通过 检查 class 属 性 来 确定 数据 的 含义 。 

举 个 例子 ， 可 以 使 用 hCard 表示 一 个 人 、 一 家 公司 或 组 织 , 或 者 一 个 地 方 的 详细 联系 信息 。 
第 一 步 是 添加 一 个 包含 正确 类 名 的 根 元 素 。 对 hCard 而 言 ， 类 名 是 vcard。( 一 般 来 说 ， 类 名 与 格 
式 名 是 匹配 的 ， 这 里 之 所 以 叫 vcard 有 个 历史 原因 。 过 去 有 一 种 格式 叫 Versitcard，hCard 以 这 种 格 
式 为 基础 ， 因 此 就 有 了 vcard 这 个 类 和 名。) 

下 面 这 个 <div> 元 素 包 含 了 hCard， 可 以 用 于 包含 详细 联系 信息 : 


<div class="vcard"> 
</div> 
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在 这 个 根 元 素 中 ， 可 以 添加 联系 人 信息 。 每 个 信息 都 要 单独 用 一 个 元 素 包含 ， 同 时 赋予 该 
元 素 一 个 正确 的 类 名 。 比 如 ， 在 hCard 中 ， 可 以 使 用 fn 这 个 类 名 表示 人 的 全 名 ， 使 用 ur1 表 示 个 
人 主页 : 
<div class="vcard"> 
<h3 class="fn">Mike Rowe</h3> 
You can see Mike Rowe's website at 
<a class="url" href="http://www.magicsemantics.com">www.magicsemantics.com 


</a> 
</div> 


在 微 格式 中 使 用 类 名 时 ,不 需要 在 样式 表 中 创建 对 应 的 样式 。 拿 上 面 的 例子 来 说 , 就 是 不 必 
给 vcard、fn 或 ur1 写 样式 规则 。 此 时 类 名 的 用 处 ， 就 是 告诉 别人 你 的 数据 结构 良好 ， 意 思 明 确 。 

















注意 ”标记 数据 前 ， 要 先 选 好 想 用 的 微 格式 。 可 选 的 不 多 ， 大 多 数 还 在 修订 和 改进 。 至 于 有 哪 
些 可 选 , 以 及 它们 的 详细 用 法 ,请 参考 :http:/microformats.org/wiki。 要 了 解 更 多 关于 hCard 
的 信息 ， 请 参考 http://microformats.org/wiki/hcard。 





只 要 会 使 用 hCard， 再 使 用 hCalendar 就 毫 无 压力 了 。 后 者 的 流行 程度 仪 次 于 hCard。 可 以 使 用 
hCalendar 标 注 约会 、 会 议 、 假日、 产品 发 布 时 间 、 商 店 开 业 时 间 等 。 首 先 , 需要 把 活动 列表 包装 
在 一 个 元 素 中 ， 将 这 个 元 素 的 class 必 性 值 设置 为 vevent。 在 这 个 元 素 内 部 ， 至 少 要 包含 两 段 信 
息 : 开始 日 期 (使 用 类 名 dt-start ) 和 说 明 (使 用 类 名 summary )。 上 此外， 也 可 以 选择 
http://microformats.org/wiki/hcalendar 中 列 出 的 其 他 可 选 的 属性 , 包括 结束 日 期 工 持续 时 间 、 地 点 ， 
以 及 包含 更 详细 信息 的 页 面 URL。 下 面 来 看 一 个 例子 : 

<div class="vevent"> 

<h2 class="summary">Web Developer Clam Bake</h2> 

<p>I'm hosting a party!</p> 

<p>It's 

<Span class="dtstart" title="2014-10-25 13:30">Tuesday, October 25， 

1:30PM</span> 

at the <span class="location">Deep Sea Hotel, San Francisco, CA</span></p> 
</div> 


看 到 微 格式 这 人 么 流行 ， 你 慌 怕 会 认为 语义 Web 争 夺 战 应 该 可 以 尘埃 落 定 了 。 可 惜 还 没有 ， 听 
我 说 。 首先, 数量 极为 庞大 的 网 页 中 包含 的 标记 仍然 毫 无 语义 可 言 。 其 次 ,就 算 采 用 了 微 格式 的 
网 页 ， 其 用 途 也 只 有 两 个 : 联系 信息 和 活动 列表 。 既 然 微 格式 的 应 用 还 十 分 有 限 ， 那 这 个 领域 的 
苋 争 就 不 可 避免 。 青 次 , 潮流 已 经 开始 转向 不 太 为 人 所 知 但 却 更 加 灵活 的 微 数据 规范 。 人 们 发 现 ， 
微 格式 似乎 只 是 走向 微 数据 标准 的 一 个 中 间 停 靠 站 。 下 一 节 我 们 就 介绍 微 数据 。 























3.2.4” 微 数据 


微 数据 ( Microdata ) 是 尝试 解决 语义 标记 问题 的 另 一 种 选择 。 它 最 早 是 HTML5 规 范 的 一 部 
分 ， 后 来 分 离 出 来 成 为 一 个 独立 的 标准 : http://dev.w3.org/html5/md/。 微 数据 采用 的 方法 与 RDFa 
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类 似 , 但 简化 了 一 些 。 另 外 ,与 微 格式 不 同 ， 它 使 用 自己 的 属性 ， 因 而 不 存在 与 样式 表 规 则 冲突 
的 风险 ( 也 不 会 让 Web 开 发 人 员 感 到 困惑 )。 这 种 设计 意味 着 微 数据 更 讲究 逻辑 性 ， 而 有 旦 更 容易 
改编 为 适合 你 网 页 的 语言 。 不 过 这 一 切 是 以 牺牲 简洁 性 为 代价 的 , 采用 微 数据 的 网 页 要 比 采用 微 
格式 的 网 页 大 很 多 。 

最 近 ， 随 着 微软 、 谷 歌 、 雅 虎 和 Yandex ( 俄罗斯 最 大 搜索 引擎 ) 组 团 创建 微 数据 收录 网 站 
http://schema.org ， 微 数据 获得 了 空前 的 发 展 。 在 前 面 提 到 的 网 站 中 ， 可 以 看 到 各 种 微 数据 格式 
和 示例 , 包括 Person 和 Event ( 效仿 的 是 hCard 和 hEvent 微 格式 )， 以 及 更 特定 的 格式 ， 比 如 针对 公 
司 、 和 餐馆、 评审、 产品、 图书、 电影、 菜谱、 电视 节目 、 公 交 站 点 、 景 点 、 健 康 、 药 物 等 的 格式 。 
目前 ， 只 有 搜索 引擎 关注 这 种 信息 ， 但 它们 驱动 流量 和 塑造 Web 的 威力 是 任何 人 都 不 能 小 看 的 。 
(3.4 节 将 介绍 搜索 引擎 如 何 使 用 这 种 信息 。) 






































注意 ”现在 看 来 ， 微 数据 作为 元 数据 的 一 种 适当 标准 ， 有 望 走 红 。 这 是 因为 它 比 微 格 式 灵 活 ， 
比 RDFa 简 单 Oo 


在 标注 微 数 据 时 ， 首 先 要 给 相应 元 素 ( 如 果 连 元 素 也 需要 新 添加 ， 那 <div> 元 素 从 逻辑 上 更 
像 一 个 容器 ) 添加 itemscope 和 itemtype 属 性 。 其 中 ，itemscope 属 性 表示 开始 一 段 新 的 语义 内 容 ， 
而 itemtype 属 性 表示 内 容 中 包含 的 数据 类 型 : 

<div itemscope itemtype="http://schema.org/Person"> 

</div> 

标识 数据 类 型 时 ， 要 使 用 一 个 叫 XML 命 名 空间 的 预定 义 的 、 独 一 无 二 的 字符 串 。 在 这 个 例 
子 中 ，http:/schema.org/Person 就 是 XML 命名 空间 ， 其 中 定义 了 用 于 编写 联系 人 信息 的 标准 的 微 
数据 格式 。 














微 数 据 的 命名 空间 

每 一 种 微 数 据 都 需要 一 个 命名 空间 。 从 技术 角度 说 ,命名 空间 用 于 标识 微 数据 所 用 的 词汇 。 
比如 ,命名 空间 http://schema.org/Person 就 表示 当前 标记 要 使 用 Person 词 汇 表 。 在 
http://schema.org 中 ， 可 以 看 到 几 十 种 微 数 据 的 词汇 表 ( 见 图 3-3 )。 

XML 命 名 空间 一 般 是 URL 形 式 的 。 有 时 候 ， 在 浏览 器 中 打开 相应 的 URL， 可 以 看 到 对 相 
应 数据 类 型 的 说 明 ( 就 像 你 打开 http://schema.org/Person 一 样 )。 不过，XMIL 命 名 空间 不 一 定 非 
要 在 网 上 有 对 应 的 页 面 ， 甚至 不 必 是 URL 形 式 。 换 名 话说 ,是 什么 形式 ,完全 取决 于 创建 相应 
格式 的 人 。URL 形 式 的 好 处 是 利用 个 人 或 公司 的 域名 ,从 而 确保 命名 空间 的 唯一 性 。 这 样 ， 就 
不 应 该 有 其 他 人 使 用 同一 个 命名 空间 来 创建 不 同 的 数据 格式 ， 也 就 避免 了 混淆 。 

如 果 命 名 空间 以 http://schema.org 开 头 ， 说明 它 得 到 了 微软 、 谷 歌 、 雅 虎 和 Yandex 的 支持 。 
因此 ,如果 你 使 用 它 的 词汇 表 ， 那 可 以 放心 , 世界 上 最 大 的 搜索 引擎 都 能 理解 你 在 干什么 。 如 
果 命 名 空间 以 http://data-vocabulary.org 开 头 ， 那 说 明 其 词汇 表 稍 老 一 些 。 虽 然 大 多 数 搜索 引擎 
也 能 理解 ， 但 最 好 还 是 与 时 俱 进 ， 到 http://schema.org 中 去 找 等 价 的 词汇 表 。 
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i -“ 国 双 。 图 3-3 :要 找到 合用 的 微 数据 词 
Gy schema.ord/docs/schemas htm 均 | 三 汇 表 ， 最 好 从 http:/schema.org 
| /docs/schemas.html 找 起 。 单 击 链 
接 可 以 跳 到 常用 词汇 表 的 定 
和 义 ， 比 如 Person、Organization、 
Event。 或 者 单 击 “Full list of 
types” 链 接 查 看 各 种 分 类 














Organization of Schemas 


The schemas are a set of types', each associated Wirh a set of properties. The types are arranged in a 


hierarchy 


Browse the full hierarchy 






works: CreativeWork, Book, Movie, MusicR 
jects: AudioObject, ImageObject, 


ding, Recipe, TVSeries 






VideoObject 


and medical types: nores on the health and medical types under MedicalEntity. 
e Organization 
se Person 


* Place, LocalBusiness, R 





urant 





* Product, Offer, AggregateOffer 








* Review, AggregateRating ~ 




















定义 完 容器 元 素 后 ， 就 可 以 开始 下 一 步 了 。 在 容 带 元 素 内 ,使 用 itemprop 属 性 来 标注 重要 信 
息 。 这 种 方式 与 微 格式 的 基本 规则 相同 一 一 通过 公认 的 itemprop 名 称 , 其 他 软件 可 以 从 关联 的 元 
素 中 取得 信息 。 

以 下 代码 使 用 了 微 数据 ， 相 当 于 前 面 使 用 微 格式 的 标记 : 

<div itemscope itemtype="http://schema.org/Person"> 

<h3 itemprop="name">Mike Rowe</h3> 
You can see Mike Rowe’s website at 
<a itemprop="url" href="http://www.magicsemantics.com">www.magicsemantics. 


com</a> 
</div> 











注意 微 数据 与 微 格式 最 重要 的 不 同 就 是 ， 微 数据 标注 元 素 时 使 用 itemprop 属 性 ， 而 不 是 class 
属性 。 由 于 微 数 据 使 用 自己 的 itemcope、itemtype 和 itemprop 属 性 ， 而 不 是 class 属 性 ， 
因此 你 的 语义 标记 不 会 与 样式 表格 式 混淆 。 


使 用 Person 词 汇 表 可 以 标注 很 多 细节 ， 比 如 邮政 地 址 、 电 子 邮 箱 、 电 话 号 码 、 和 生日、 照片、 
职务 、 单 位 名 称 、 性 别 、 国 籍 ， 等 等 。 全 面 的 信息 请 参考 : http://schema.org/Person。 











注意 这 三 种 富 语义 数据 标准 RDFa、 微 数据 和 微 格 式 很 多 地 方 都 是 相似 的 。 虽 然 它 们 
不 完全 兼容 ， 但 使 用 其 中 一 种 标准 的 技能 ， 多 数 情 况 下 都 适用 于 其 他 标准 。 
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3.3 ”实例 : 改进 “About Me” 页 面 


至 此 , 我 们 已 经 了 解 了 微 格式 和 微 数据 这 两 个 语义 流派 的 基本 结构 。 以 此 为 起 点 , 大 家 可 以 
自己 ( 到 http://microformats.org ) 去 找 新 的 微 格 式 ， 或 者 〈 到 http://schema.org ) 去 找 微 数据 词汇 
表 ， 从 头 开始 编写 富有 语义 的 标记 。 

但 生活 往往 并 没有 那么 如 意 ， 至 少 对 大 多 数 Web 开 发 者 来 说 没有 。 更 常见 的 情况 则 是 你 手头 
已 经 有 了 一 个 包含 数据 的 网 页 ， 你 需要 改进 其 中 的 标记 ,将 其 语义 化 。 如 果 你 记 住 以 下 几 点 ， 这 
件 于 个 也 不 难 - 9 
口 通常 ， 有 些 重 要 的 数据 会 混在 一 些 无 关 紧要 的 数据 中 。 此 时 ， 可 以 给 重要 的 数据 加 上 新 
标记 ， 比 如 用 <div> 标 记 块 级 元 素 ， 用 <span> 标 记 行 内 元 素 。 
口 不 用 担心 信息 的 次 序 。 只 要 使 用 的 类 名 ( 微 格式 ) 或 属性 名 〈 微 数据 ) 正确 ， 就 可 以 按 
照 自 己 的 意愿 组 织 标记 。 
口 想 显 示 图 片 ， 就 用 <img>; 想 放 个 链接 ， 就 用 ca>。 除 此 之 外 ， 一般 就 是 标记 普通 的 文本 。 
下 面 就 有 一 个 典型 的 例子 。 图 3-4 中 的 “About Me” 页 面包 含 以 下 内 容 : 


<h1>About Me</h1> 













































































<img src="face.jpg" alt="Mike's Face"> 
<p>This website is the work of <b>Mike Rowe Formatte</by> . 
His friends know him as <b>The Big M</b>.</p> 


<p>You can contact him where he works, at 
The Magic Semantic Company (phone 
641-545-0234 and ask for Mike) or email mike-f@magicsemantics.com.</p> 


<p>0r, visit Mike on the job at:<br> 

42 Jordan Gordon Street, 6th Floor<br> 

San Francisco, CA 94105<br> 

USA<br> 

<a href="http://www.magicsemantics.com">www.magicsemantics.com</a> 
</p> 


很 明显 ， 这 个 例子 用 我 们 熟悉 的 Person 词 汇 表 (http:/schema.org/Person ) 正 合 适 。 我 们 试 着 
给 “About Me” 页 面 中 的 重要 信息 添加 微 数据 标记 。 新 增 的 微 数据 标记 都 加 粗 了 。 


<h1>About Me</h1> 


<div itemscope itemtype="http://schema.org/Person"> 
<img itemprop="image" src="face.jpg" alt="Mike's Face"> 
<p>This website is the work of 
<span itemprop="jobTitle" style="display:none">Web Developer</span> 
<b itemprop="name">Mike Rowe Formatte</b>. 
His friends know him as <b itemprop="additionalname">The Big M</b>.</p> 
<p>You can contact him where he works, at 
The Magic Semantic Company</span> (phone 
<span itemprop="telephone">641-545-0234</span> and ask for Mike) 
or email <span itemprop="email">mike-f@magicsemantics.com</span>.</p> 
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<p>0r, visit Mike on the job at:<br> 
42 Jordan Gordon Street, 6th Floor<br> 
San Francisco, CA 94105<br> 

USA<br> 


<a itemprop="url" href="http://www.magicsemantics.com">www.magicsemantics. 


com</a> 
</p> 
</div> 











- aE 





OS EE] Microdata.html DPD- 四 Microdata Example 














About Me 





This website is the work of Mike Rowe Formatte. 
His friends know him as The Big M. 


You can contact him where he works, at The Magic 
Semantic Company (phone 641-545-0234 and ask 
for Mike) or email mike-f@magicsemantics.com . 


Or, visit Mike on the job at: 

42 Jordan Gordon Street, 6th Floor 
San Francisco, CA 94105 

USA 

www.magicsemantics.com 











图 3-4: 这 个 “About Me” 页 面包 含 网 站 作者 的 
详细 联系 信息 ， 但 尚未 添加 任何 微 数据 标记 





这 个 例子 用 了 几 种 技巧 。 





Formatte</span></b>。) 





口 使 用 新 <span> 包 含 了 需要 标注 微 数据 的 内 容 。 
口 给 原 有 合适 的 元 素 添加 了 itemprop 属 性 。 比 如 ，<b> 里 面 是 名 字 ， 因 此 没 必 要 再 多 此 一 举 
弄 个 <span> 了 。( 当然 ， 你 加 上 也 可 以 。 就 像 这 样 : 


<b><span itemprop="name">Mike Rowe 


口 使 用 看 不 见 的 <span> 表 示人 的 职务 。( 文本 使 用 行内 样式 将 display 设 为 none。) 这 个 技巧 
经 常用 于 隐藏 多 余 信 息 ， 但 又 可 以 让 搜索 引 敬 和 其 他 工具 找 得 到 。 也 有 人 说 这 种 做 法 会 
导致 一 些 工 具 ( 如 Google ) 对 其 视而不见 ， 因 为 这 些 信息 对 用 户 不 可 见 。 
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微 数据 经 常会 有 效 套 的 结构 ， 即 一 个 词汇 表 会 套 住 另 一 个 。 比 如 ， 可 以 在 Person 词 汇 表 的 个 
是 中 套 上 地 址 信息 ， 而 地 址 信息 使 用 的 词汇 可 能 来 自 PostalAddress 词 汇 表 。 
标记 地 址 信息 时 ， 要 使 用 带 有 itemprop 、itemscope 或 itemtype 属 性 的 <div> 或 <span> 元 素 。 
itemprop 是 属性 名 ，itemscope 属 性 表示 要 使 用 新 词汇 表 提 供 属性 数据 ， 而 itemtype 属 性 是 以 XML 
命名 空间 表示 的 词汇 表 ( 在 这 里 是 http://schema.org/PostalAddress ), 下 面 是 两 个 词汇 表 髓 套 的 结果 : 
































<div itemscope itemtype="http://schema.org/Person"> 
<img itemprop="image" src="face.jpg" alt="Mike's Face"> 
<p>This website is the work of 





<p>0r, visit Mike on the job at:<br> 
<span itemprop="address" itemscope 
itemtype="http://schema.org/PostalAddress"> 


c/span> 
</div> 


接 下 来 就 可 以 在 新 区 域 中 标注 地 址 信息 了 


<div itemscope itemtype="http://schema.org/Person"> 
<img itemprop="image" src="face.jpg" alt="Mike's Face"> 
<p>This website is the work of 


<p>0r, visit Mike on the job at:<br> 
<span itemprop="address" itemscope 
itemtype="http://schema.org/PostalAddress"> 
<Span itemprop="streetAddress">42 Jordan Gordon Street, 
6th Floor</span><br> 
<span itemprop="addressLocality">San Francisco</span>, 
<Span itemprop="addressRegion">CA</span> 
<span itemprop="postalCode">94105</span><br> 
<span itemprop="addressCountry">USA</span><br> 
</span> 


</div> 

这 样 完 全 没有 问题 。 或 许 你 不 太 清 楚 什 么 时 候 可 以 在 一 个 微 数据 区 域 中 再 新 开 一 个 微 数 据 区 
域 ， 那 就 看 看 这 个 参考 页 面 吧 : http:/schema.org ( 参见 图 3-5 )。 

在 标注 公司 名 称 时 ， 同 样 可 以 采用 这 种 般 套 的 方式 。 在 此 ， 需 要 把 人 的 affiliation 属 性 设 
置 为 使 用 Organizatioin 词 汇 表 : 


<p>You can contact him where he works, at 
<span itemprop="affiliation" itemscope 
itemtype="http://schema.org/O0rganization"> 

<span itemprop="name">The Magic Semantic Company</span> 
</span> 
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-5 本 加 图 3-5，Person 词 汇 表 


DD Person- schema.org x \ _\ | , 

所 © | schema.org/Person yr 三 | 的 属性 很 多 ( 图 中 只 显 
Thing > Person “| 示 了 一 少 部 分 )。 大 多 
A person (alive, dead, undead, or fictional) | 数 属 性 用 于 标 注 普 痊 通 


| Property Be Type ES 文本 数值 或 日 期 但 


Properties from Thing 


















































Thing 上 此 ( Ne Ab 正六 
URL An additional type for the item, typically used for adding more | 有 些 ( 如 这 里 能 看 到 
specific types from external vocabularies in microdata syntax. This is | 的 | ) 会 使 
a relationship between something and a class that the thing is in. In | Jaddress 属 性 到 
RDFa syntax, it is betterto use the native RDFa syntax - the ‘typeof 自 己 的 Do 、 广 表 
attribute - for muhkiple types. Schema org tools may have only 用 中 词 LL 
weaker understanding of extra types, in particular those defined | 
teriially. (PostalA ddress )。 单 
Text A short description of the item 击 术 AY 接 六 解 
。 击 相应 链接 , 可 以 了 
URL URL of an image of the iem 
zs 
Text The name of the item 更 多 内 合 
URL URL of a reference Web page that unambiguously indicates the item's 
SameAs identity. E.g. the URL of the rem's Wikipedia page, Freebase page, 


or official website 


url URL URL of the item 


Properties from Person 





additionalName Text An additional name for a Person, can be used for a middle name 
PostalAddress Physical address of the item 
Organization An organization that this person is affiliated with. For example, a 


school/university, a club, or a team 


EducationalOrganization An educational organizations that the person is an alumni of 














Text An award won by this person or for this creative work 
| 
Text Awards won by this person or for this creative work. (legacy spelling | 
avwards | 
a see singular form, award) | 
birthDate Date Date of birth | 

















提示 。 如 果 你 不 喜欢 手工 输入 itemtype 或 itemprop 等 属性 名 , 可 以 找 一 个 在 线 工具 来 帮 你 自动 生成 。 
比如 , http://schema-creator.org 和 http://www.microdatagenerator.com。 这 两 个 网 站 的 用 法 差 不 
你 选择 词汇 表 ， 然 后 在 文本 框 里 输入 数据 ， 最 后 复制 生成 的 标记 。 


在 浏览 器 中 提取 语义 数据 


说 到 这 儿 ,我 们 还 应 该 了 解 一 下 这 么 做 的 好 处 。 尽 管 目前 还 没有 浏览 需 能 原生 识别 微 格式 ( 至 
少 在 本 书写 作 时 没有 )， 但 还 是 有 不 少 插件 和 脚本 可 以 赋予 浏览 器 这 种 能 力 。 至 于 这 些 语义 数据 
的 用 途 ， 当 然 也 不 少 。 比 如 ,浏览 右 可 以 检测 页 面 中 的 联系 信息 ， 把 它们 单列 在 一 个 面板 中 ， 让 
你 像 添加 页 面 书签 一 样 ， 迅速 地 添加 联系 人 信息 。 再 比如 ,浏览 絮 检 测 到 会 议 信息 后 ,你 可 以 只 
单 击 一 下 ， 0 或 者 在 地 图 中 标 出 会 议 地 点 。 

目前 还 没有 插件 能 做 到 这 些 。 不 过 ,一些 骨 灰 级 的 Web 开 发 人 员 已 经 写 了 不 少 JavaScript 脚 本 ， 
用 于 搜索 微 格式 或 微 数据 ， 0 它们 ,或 者 用 于 其 他 用 途 。( 比如 用 JavaScript 写 的 微 
格式 工具 : http://krofdrakula.github.io/microdata-tool/。) 某 些 浏览 器 也 有 相应 的 插件 可 以 发 现 网 页 
中 不 同 的 元 数据 ( 图 3-6 )。 
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| 图 3-6 : Chrome 扩 展 Semantic 




















YD Microdata Example x 
Ga Microdatahtml 和 > 中 三 Inspector 可 以 提取 当前 页 面 中 的 所 有 
About Me sam ” ”元 数据 。 单 击 其 工具 条 中 的 按钮 , 就 可 
prot 以 看 到 语义 数据 层 。 这 个 图 是 使 用 该 扩 
joore 展 提取 “About Me” 页 面 中 元 数据 的 
cei 结果 
additionalName 
3 


The Magic Semantic Company 
telephone 
641-545-0234 

让 






mike 
This website is the work of address 











You can contact him wheremc -oreor ocr mag cmarraccomp 
ask for Mike) or email mike-f@magicsemantics.com. 




















将 来 ,主流 浏览 器 很 可 能 原生 支持 微 格 式 ， 就 像 EE 和 Firefox 原 生 支 持 数据 源 一 样 。 数 据 源 是 
一 种 特殊 的 标记 文档 ,可 以 提供 最 新 内 容 ， 比 如 最 新 文章 汇总 等 。 如 果 你 使 用 Firefox 打 开 某 个 博 
客 ， 它 会 自动 检测 博客 的 RSS 数 据 源 ， 为 你 提供 一 个 “实时 ”的 新 内 容 书签 。 微 格式 将 来 也 可 以 
为 网 页 提供 类 似 的 附加 价值 。 


3.4 搜索 引擎 如 何 使 用 元 数据 


在 自己 的 页 面 里 加 入 语义 上 的 细节 ， 是 为 你 顾 得 Web 极 客 称号 的 不 错 方式 。 不 过 ， 即 使 是 最 
忠实 的 Web 开 发 者 ， 也 要 判断 做 这 些 额 外 的 工作 〈 以 及 把 标记 搞 得 不 那么 整洁 ) 是 否 值得 。 如 果 
所 有 浏览 器 都 绝顶 陪 明 ， 都 能 识别 这 些 语义 该 有 多 好 啊 ! 但 冷酷 的 现实 是 ， 只 有 屈指 可 数 的 几 个 
不 那么 知名 的 浏览 器 插件 可 供 使 用 。 

好 在 ， 为 标记 添加 丰富 的 语义 还 有 一 个 理由 : SEO ( Search Engine Optimization ， 搜 索引 擎 
优化 )。SEO 是 一 种 艺术 ， 可 以 让 你 的 网 站 更 容易 被 搜索 引擎 曝光 ; 换 名 话说， 你 的 网 页 能 够 更 
频繁 地 出 现在 搜索 结果 中 , 对 某 些 关键 词 能 有 更 好 的 排名 , 更 有 可 能 吸引 用 户 点 击 访问 你 的 网 站 。 
完备 的 元 数据 可 以 提升 用 户 点 击 访问 你 的 网 站 的 可 能 性 。 你 要 做 的 就 是 在 页 面 中 放 入 正确 的 语义 
数据 ， 然 后 谷歌 等 搜索 引 敬 可 以 找到 它们 并 构建 一 个 漂亮 的 搜索 列表 ， 让 你 的 网 站 能 稚 立 鸡 群 。 





























3.4.1 Google Rich Snippets 


今天 , 大 多 数 搜索 引擎 都 能 理解 自己 收录 的 页 面 中 的 元 数据 。 本 章 后 面 将 主要 讲解 谷歌 如 何 
处 理 元 数据 。 之 所 以 讲 谷歌 ,主要 因为 它 是 世界 第 一 搜索 引 苟 ， 占 据 三 分 之 二 的 市 场 份额 男 外 
也 因为 谷歌 多 年 来 一 直 使 用 和 推动 元 数据 。 因 此 , 谷歌 今天 使 用 元 数据 的 方式 ,可 能 就 是 其 他 搜 
索引 擎 明天 使 用 元 数据 的 方式 。 

Rich Snippets 是 谷歌 推出 的 一 个 工具 ,能 够 将 RDFa 、 微 格式 和 微 数 据 结合 起 来 。 前 面 已 经 介 
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绍 过 了 ， 这 几 种 语义 标准 有 很 多 共性 ， 而 且 都 是 为 了 解决 相同 的 问题 。 谷 歌 了 解 所 有 这 些 标准 ， 
并 且 尝 试 对 它们 一 视 同 仁 ， 因 此 无 论 你 使 用 哪 种 标准 ， 都 没有 问题 。( 接 下 来 的 例子 将 使 用 微 数 
据 ， 同 时 也 是 为 了 让 你 了 解 HTML5 最 新 的 语义 标准 。) 

要 了 解 谷歌 支持 的 元 数据 的 更 多 信息 ， 请 参考 谷歌 的 文档 : http:Wtinyurl.com/Google 
RichSnippets。 这 个 页 面 不 仅 介绍 了 RDFa 、 微 格式 和 微 数据 , 还 展示 了 很 多 不 同 的 片段 的 示例 ( 如 
联系 人 信息 、 活 动 、 产 品 、 评 论 、 配 方 ， 等 等 。) 更 赞 的 是 ， 谷 歌 在 每 个 例子 中 都 提供 了 RDFa、 
微 格式 和 微 数 据 的 版 本 ， 通 过 这 些 例 子 ， 你 可 以 全 面 掌握 所 有 语义 标准 的 使 用 方法 。 


3.4.2 ”增强 搜索 结 


要 了 解 Google Rich Snippets 如 何 工 作 ， 可 以 使 用 谷歌 的 Structured Data Testing Tool。 这 个 工 
具 会 检测 你 提供 的 页 面 , 展示 谷歌 从 中 提取 出 来 的 语义 数据 以 及 谷歌 如 何 利 用 这 些 数据 定制 该 页 
面 在 用 户 搜索 结果 中 显示 的 方式 。 




















注意 ”Structured Data Testing Tool 的 用 处 体现 在 两 方面 。 首 先 ， 它 能 帮 你 验证 语义 标记 。 如 果 谷 
歌 无 法 全 部 提取 出 你 放 到 页 面 中 的 信息 ， 或 者 其 中 某 些 信息 被 标记 为 错误 的 属性 ， 就 说 
明 你 可 能 有 地 方 做 错 了 。 其 次 ， 它 能 向 你 展示 语义 数据 对 出 现在 谷歌 搜索 结果 中 页 面 外 
观 的 影响 。 


要 使 用 Structured Data Testing Too1， 可 以 参考 如 下 步骤 。 

(1) 打开 http://www.google.com/webmasters/tools/richsnippets。 

这 个 页 面 中 包含 一 个 文本 框 ( 见 图 3-7 )。 

(2) 如 果 你 想 粘 贴 标 记 ， 单 击 HTML 标 签 。 使 用 Structured Data Testing Tool 的 方式 有 两 种 ， 由 
页 面 中 的 两 个 标签 表示 。 
口 URL 标 签 。 让 谷歌 分 析 在 线 页 面 ， 在 这 里 粘贴 完整 的 网 址 ; 
口 HTML 标 签 。 可 以 粘贴 你 想 分 析 的 标记 段 〈 不 需要 完整 的 页 面 标记 )， 适 合 还 没有 上 线 的 

页 面 。 

(3) 输入 URL 或 粘贴 标记 段 ， 单 击 Preview 按 钮 。 

这 样 ， 就 可 以 预览 结果 ( 见 图 3-7 )。 预 览 时 要 注意 两 部 分 ， 一 是 Google search preview 部 分 ， 
其 中 包含 页 面 在 谷歌 搜索 结果 中 的 样子 。 另 一 个 是 Extracted rich snippet data from the page， 其 中 
包含 谷歌 能 够 从 页 面 中 提取 出 来 的 所 有 原始 语义 数据 。 




















提示 。 如果 你 看 到 了 “Insufficient data to generate the preview”( 没有 足够 的 数据 生成 预览 )， 有 
三 种 可 能 。 第 一 ， 你 的 标记 可 能 有 错误 。 此 时 ， 查 看 一 下 谷歌 提取 出 来 的 原始 数据 ， 确 
保 它 找到 了 你 放 在 页 面 中 的 所 有 数据 。 如 果 不 是 这 个 问题 ， 那 有 可 能 是 你 使 用 了 某 个 数 
据 类 型 ， 而 谷歌 尚未 支持 该 类 型 ， 或 者 你 添加 的 属性 还 未 达到 谷歌 要 求 的 最 低 数目 。 实 
在 不 行 , 可 以 拿 你 的 标记 与 谷歌 的 例子 ( http://tinyurl.com/GoogleRichSnippets ) 进行 对 比 。 
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Structured Data Testing Tool 图 3-7 : 在 此 ， 谷歌 找 到 
URL HTML 了 联 系 人 信息 AS 和 地 址 
信息 ( 基于 3.2.4 节 微 数 


AN 可 
你 想 有 让 谷歌 检 一 一 http://prosetech com/html5/Chapter%2003/Microdata html 


























测 的 页 面 据 的 例子 ) ; 有 了 这 些 
Google search results Google Custom Search 信息 ， 谷歌 在 页 面 标题 
Preview 恶 方 ; 添 条 加 本 行 灰 色 
的 文本 ， 把 联系 人 信息 
谷歌 用 灰色 在 这 Microdata E Example > A 显示 了 出 来 





— San Francisco CA- Web Dev eloper - Th e Magic Semantic Company 
里 显示 语义 数据 


The excerpt from the page will show up here. The reason we can't show text from your 
webpage is because the text depends on the query the user types 


Extracted structured data 


谷歌 找到 了 页 。“" 
面 中 的 联系 人 — type: http-//data-vocabulary.org/person 
信息 
photo http-Wprosetech.coryhtml5/Chapter%2003/face.jpg 
title: Web Developer 
name Mike Rowe Formatte 
nickname The Big M 
affiliation The Magic Semantic Company 
tel 641-545-0234 
address ltem 1 
url www.magicsemantics.com 
pa 0 ltem 1 
谷歌 也 找到 一 一 type: http-//data-vocabulary.org/address 
了 地 址 信息 wopen 
street-address: 42 Jordan Gordon Street, 6th Floor 
locality San Francisco 
region CA 
postal-code 94105 
country-name， USA 











谷歌 使 用 的 强调 联系 人 信息 ( 图 3-7 ) 的 方法 比较 受 限 制 。 不 过 ， 耸 歌 能 识别 的 富 数 据 类 型 
仅 限 于 联系 人 信息 。 本 章 前 面 ， 我 们 介绍 了 如 何 使 用 微 格式 定义 活动 〈 见 3.2.3 节 )。 如 果 你 在 页 
面 中 添加 一 系列 活动 ， 那 谷歌 可 能 会 把 相关 信息 显示 在 搜索 结果 下 面 ， 如 图 3-8 所 示 。 

















The Filmore New York at Irving Plaza Concert Tickets Schedule ... 图 3-8: 这 个 示例 页 面 中 包含 三 个 活 


Buy The Fillmore New York at Irving Plaza tickets and find concert schedules, venue 动 。 如 果 你 是 供 a 
information, and seating charts for The Fillmore New York at Iming .…. 














Led Zeppelin 2 Sat. Jan 23 动 ( 像 这 里 这 样 ) 9 那 谷歌 会 把 它们 
Cheap Trick with Jason Falkner Mon, Jan 25 转换 成 可 点 击 的 链接 


Hip Hop Karaoke Championship Fri, Jan 29 


www.livenation.com/.../the-fillImore-new-york-at-irving-plaza-new-york-ny-tickets - 
Cached - Similar - 
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谷歌 也 能 识别 企业 名 录 ( 处 理 方式 与 处 理 个 人 联系 信息 类 似 )、 食 谱 ( 下 一 节 介 绍 相关 的 例 
子 ) 和 评论 (下面 马 上 会 讨论 到 )。 
接 下 来 的 例子 展示 了 一 些 标记 , 我 们 需要 把 其 中 的 评论 文本 转换 为 可 识别 的 评论 微 数 据 。 相 
关 的 数据 标准 定义 请 参考 http://schema.org/Review。 其 中 关键 的 属性 有 itemReviewed ( 在 这 个 例子 
中 是 餐馆 )、author ( 留言 的 人 ) 和 reviewBody( 评论 全 文 )。 此 外 ， 还 可 以 给 出 一 句 话 的 概述 
( description )、 摆 写 或 提交 评论 的 时 间 ( datePublished， 支 持 HTML5 的 <time> 元 素 )， 以 及 从 0 
到 5 的 一 个 星 级 评分 (reviwRating )。 
以 下 就 是 一 个 例子 ， 其 中 加 粗 了 所 有 微 数据 : 
<div itemscope itemtype="http://schema.org/Review"> 
<p itemprop="description">Pretty bad, and then the Health Department showed 
ng 
<div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Thing"> 


<span itemprop="name">Jan's Pizza House</span> 
</div> 



































<div> 


<span itemprop="author" itemscope itemtype="http://schema.org/Person"> 
Reviewed by: <span itemprop="name">Jared Elberadi</span> 
</span> 


on <time itemprop="datePublished" datetime="2014-06-26">January 26</time> 
</div> 


<div itemprop="reviewBody">I had an urge to mack on some pizza, and this 
place was the only joint around. It looked like a bit of a dive, but I went 
in hoping to find an undiscovered gem. Instead, I watched a Health 
Department inspector closing the place down. Verdict? I didn't get to 
finish my pizza, and the inspector recommends a Hep-C shot.</div> 


<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> 
Rating:<span itemprop="ratingValue">1.5</span></div> 
</div> 


把 这 些 用 微 数据 格式 化 的 信息 放 到 页 面 中 ， 谷 歌会 给 出 特殊 处 理 ( 图 3-9 )。 

眼力 好 的 读者 会 发 现 , 这 一 篇 评论 中 用 了 4 种 微 数据 格式 。 一 种 用 于 评论 本 身 ( http://schema. 
org/Review )， 一 种 用 于 评论 的 事物 ( http://schema.org/Thing )， 一 种 用 于 评论 者 (http:/schema. 
org/Person )， 还 有 一 种 用 于 评级 系统 (http:/schema.org/Rating )。 使 用 这 些 标准 还 可 以 标识 出 评 
论 相关 的 更 多 细节 。 比 如 ， 可 以 添加 一 个 餐馆 的 菜单 、 评 论 者 的 电子 邮件 地 址 , 或 者 自 定义 评价 
系统 的 最 小 值 和 最 大 值 。 

在 前 述 4 种 微 数据 格式 中 ， 通 过 itemReviewed 使 用 http://schema.org/Thing 与 其 他 3 种 不 同 。 竺 
一 看 ， 这 里 的 Thing (事物 ) 含义 相当 模糊 。 实 际 上 作者 是 有 意 这 么 设计 的 ， 这 样 才能 让 你 去 标 
识 任何 可 供 评论 的 东西 。 而 且 ，Thing 也 是 一 个 基本 词汇 表 ， 很 多 特殊 的 词汇 表 都 以 它 为 基础 。 
比如 产品 、 位 置 、 活 动 、 图 书 、 音 乐 ， 等 等 ( 参见 http://schema.org/docs/full.html )。 在 这 个 例子 
中 , 也 可 以 不 使 用 Thing 而 使 用 更 具体 的 Restaurant ( 在 http://schema.org/Restaurant 中 定义 )。 不 过 ， 
由 于 这 个 页 面 并 不 包含 有 关 和 餐馆 的 其 他 信息 ， 所 以 没有 必要 。 
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图 3-9: 搜索 结果 确实 突出 了 评论 ， 而 
且 评 价 星 级 也 非常 抢眼 





Structured Data Testing Tool 


URL HTML 


<div itemscope itemtype="http://schema.org/Review"> 

<p itemprop="description">Pretty bad, and then the Health Department showed 
up.</p> 

<div itemprop="itemReviewed" ittemscope itemtype="http://schema.org/Thing"> 


<span itemprop="name">Jan's Pizza House</span> 
</div> 





<div> 
<span itemprop="author itemscope itemtype="http://schema.org/Person"> 
Reviewed by: <span itemprop="name">Jared Elberadi</span> 


Google search results Google Custom Search 


Preview 


Once you add a page title, it will appear here 

www.example.com/ 

六 Rating: 1.5 - Review by Jared Elberadi - Jun 26, 2014 

The excerpt from the page will show up here. The reason we can't show text from your 
webpage is because the text depends on the query the user types 








注意 ”可 以 参考 微软 的 必 应 ( Bing ) 如 何 使 用 Bing Markup Validator( http://www.bing.com/toolbox/ 
markup-validator ) 处 理 元 数据 。 如 果 你 俄语 很 好 ， 可 以 试 试 Yandex 的 微 格式 验证 器 ， 地 
址 是 http://webmaster.yandex.ru/microtest.xml。 


怎么 防止 谷歌 对 你 的 语义 数据 视而不见 
虽然 谷歌 能 在 搜索 结果 中 对 富 含 语义 的 页 面 给 予 特殊 待遇 ,但 这 并 不 意味 着 它 一 定 会 这 样 
做 。 谷歌 自己 有 一 套 半 保 密 的 规则 ,这 些 规则 决定 了 搜索 用 户 是 否 能 看 到 语义 信息 。 不过， 有 
一 些 做 法 肯定 能 让 谷歌 忽略 你 的 数据 。 
口语 义 数据 不 是 主要 内 容 。 换 句 话说 , 假如 你 在 一 个 介绍 飞 蝇 钓 鱼 的 页 面 中 硬 加 进去 联系 
人 信息 ， 那 谷歌 就 不 太 可 能 使 用 该 信息 。( 想 想 看 ， 搜 索 用 户 在 找到 这 个 页 面 时 ， 他 想 
知道 的 是 有 关 钓 鱼 的 信息 ， 此 时 在 页 面 标题 下 面 显 示 你 的 地 址 和 公司 没有 什么 意义 。) 
另 一 方面 , 假如 你 在 自己 的 简历 页 面 中 加 入 联系 人 信息 , 那么 该 信息 被 采用 的 可 能 性 就 
大 得 多 。 
口语 义 数 据 被 隐藏 了 。 谷 歌 不 会 使 用 通过 CSS 隐 藏 的 语义 数据 。 
口 你 的 网 站 中 只 包含 很 少 的 语义 数据 。 如 果 你 的 网 站 中 只 有 为 数 不 多 的 页 面包 含 语义 数 
据 ， 谷 歌 很 可 能 忽略 这 些 页 面 。 
避免 了 犯 这 些 错误 ， 就 有 机 会 让 谷歌 帮 你 显示 更 丰富 的 信息 。 
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3.4.3 ”食谱 搜索 引擎 


在 搜索 结果 列表 中 显示 更 丰富 的 信息 是 一 个 不 错 的 技巧 , 这 样 可 以 为 网 站 带 来 更 多 流量 。 即 
便 如 此 ,你 可 能 还 是 觉得 不 过 净 。 这 些 刚 刚 掌握 的 技能 还 可 以 玩 出 什么 花样 来 呢 ? 告诉 你 吧 , 谷 
歌 的 天 才 工 程 师 们 一 直 在 忙 着 设计 未 来 的 搜索 ， 很 多 地 方 都 考虑 到 了 语义 呢 。 

比如 ， 有 一 个 点 子 非常 棒 ， 那 就 是 利用 语义 信息 实现 更 智能 的 搜索 过 滤 ， 而 不 是 影响 搜索 
结果 的 表现 。 假 设 人 们 使 用 RDFa、 微 格式 或 微 数据 标记 了 自己 的 简历 ， 谷 歌 就 可 以 提供 一 个 特 
殊 的 简历 搜索 功能 ， 专 门 检索 这 类 数据 ， 涵 盖 所 有 流行 的 求职 网 站 ,忽略 其 中 无 关 的 内 容 。 这 
种 简历 搜索 引擎 也 可 以 提供 高 级 过 滤 选 项 ， 比 如 让 公司 可 以 按照 认证 或 曾 工 作 过 的 公司 来 搜索 
候选 人 。 

目前 ， 谷 歌 还 没有 发 布 这 样 的 简历 搜索 引擎 ， 但 却 发 布 了 一 个 帮助 有 经 验 的 专业 人 士 找 工 作 
的 技术 (http://tinyurl.com/vetjobsearch ) 和 一 个 产品 搜索 服务 ( http://www.google.ca/merchants )。 但 
要 说 谷歌 最 成 熟 的 基于 元 数据 的 搜索 服务 , 还 得 说 是 它 搜索 菜谱 的 工具 , 可 以 搜索 几 百 万 种 菜 式 。 

说 到 怎样 用 微 数据 或 微 格式 来 标记 食谱 数据 , 恕 人 已 经 难 不 倒 你 了 。 无 非 就 是 把 一 个 食谱 放 
到 一 个 容器 中 ， 相 应 的 格式 遵守 菜单 数据 格式 〈http:/data-vocabulary.org/Recipe ) 即 可 。 菜 名 、 
作者 及 图 片 都 有 各 自 的 属性 ， 而 且 还 可 以 提供 一 句 话 的 概述 和 来 自用 户 的 评论 星 级 。 

下 面 就 是 一 个 食谱 的 标记 示例 : 


<div itemscope itemtype="http://data-vocabulary.org/Recipe"> 
<h1 itemprop="name">Elegant Tomato Soup</h1> 
<img itemprop="photo" src="soup.jpg" alt="A bowl of tomato soup"> 
<p>By 《span itemprop="author">Michael Chiarello</span></p> 
<p itemprop="summary">Roasted tomatoes are the key to developing the rich 
flavor of this tomato soup.</p> 




































































然后 ， 可 以 再 添加 一 些 有 关 食 谱 的 重要 信息 ， 比 如 准备 时 间 、 豪 饪 时 间 和 菜 量 。 此 外 ,还 可 
以 再 攀 套 一 个 容器 ， 用 于 包含 营养 方面 的 数据 ( 相应 的 信息 有 份量 、 卡 路 里 、 脂 肪 ， 等 等 )。 




















<p>Prep time: <time itemprop="prepTime" datetime="PT30M">30 min</time></p> 
<p>Cook time: <time itemprop="cookTime" datetime="PT1H">40 min</time></p> 
<p>Yield: <span itemprop="yield">4 servings</span></p> 
<div itemprop="nutrition" itemscope 
itemtype="http://data-vocabulary.org/Nutrition"> 
Serving size: <span itemprop="servingSize">1 large bowl<¢/span> 
Calories per serving: <span itemprop="calories">250</span> 
Fat per serving: <span itemprop="fat">3g</span> 
</div> 


注意 ”其 中 的 prepTime 和 cookTime 属 性 表示 的 是 一 段 时 间 ， 而 不 是 一 个 时 间 点 。 因 此 ,不 能 使 用 
与 HTML5 的 <time> 元 素 相同 的 时 间 格 式 。 正 确 的 格式 是 ISO 格 式 ， 详 情 参 见 : 
http://tinyurl.com/ISOdurations。 
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再 然后 ,就 该 列 出 食谱 的 各 种 原料 了 。 每 种 原料 都 要 单独 放 在 一 个 觅 套 的 容 带 中 ,其 中 一 般 
都 要 包含 原料 名 和 数量 : 


<ul> 

<li itemprop="ingredient" itemscope 
itemtype="http://data-vocabulary.org/RecipeIngredient"> 
<span itemprop="amount">1</span> 

<span itemprop="name">yellow onion</span> (diced) 

</1i> 

<li itemprop="ingredient" itemscope 
itemtype="http://data-vocabulary.org/RecipeIngredient"> 
<span itemprop="amount">14-ounce can</span> 

<span itemprop="name">diced tomatoes</span> 

</1i> 





</U]> 





原料 部 分 的 标记 写 起 来 确实 比较 烦琐 一 一 不 过 ， 别 放弃 ， 马 上 就 能 看 到 回报 了 。 
最 后 ， 就 是 一 系列 实际 操作 步骤 的 详细 说 明 ， 这 些 步骤 要 从 属于 一 个 属性 ， 比 如 : 








<div itemprop="instructions"> 
<01> 
<li>Preheat oven to 450 degrees F.</1i> 
<li>Strain the chopped canned tomatoes, reserving the juices.</1i> 
cjdivy 
cjdivy 
要 想 看 一 个 完整 的 食谱 标记 示例 ， 请 访问 http://tinyurl.com/RichSnippetsRecipe。 
注意 ”菜单 一 般 都 很 长 ， 也 很 琐碎 ， 因 此 为 它们 加 标记 要 花 比 较 长 的 时 间 ， 还 必须 全 身心 投入 。 
这 种 情况 下 ， 如 果 有 一 个 得 心 应 手 的 软件 工具 ， 显 然 能 大 大 提高 工作 效率 。 想 象 一 下 ， 
使 用 这 个 工具 ， 作 者 只 要 在 精心 布局 的 窗口 中 的 文本 框 中 依次 输入 食谱 的 细节 即 可 。 然 
后 ， 它 就 能 生成 语义 正确 、 可 以 直接 放 到 网 页 中 的 标记 代码 。 











谷歌 在 索引 了 这 个 标记 了 食谱 的 页 面 后 ,用户 就 可 以 通过 Recipe View ( 食谱 视图 ) 搜索 到 食 
谱 。 想 试 试 Recipe View 搜 索 ? 

(1) 请 访问 http://www.google.conylanding/recipes。 

打开 Recipe View 之 后 ， 可 以 看 到 很 多 相关 信息 ， 还 有 视频 教 你 如 何 使 用 。 

(2) 单 击 “Try Google with Recipe View” 按 钮 。 

单 击 后 会 打开 你 熟悉 的 谷歌 搜索 页 面 , 但 有 一 些 细微 差别 。 在 搜索 框 下 面 ,可 以 看 到 红色 的 
Recipes 标 签 ， 表 示 你 要 搜索 食谱 。 

(3) 然后 在 搜索 框 里 输入 菜 名 ， 单 击 Search。 
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谷歌 一 开始 会 搜索 chicken pasta， 你 可 以 自己 修改 。 

(4) 单 击 “Search tools” 按 钮 (在 搜索 框 右 下 方 )。 

因为 谷歌 能 理解 每 个 食谱 的 结构 ， 从 而 可 以 忽略 并 不 包含 真正 食谱 数据 的 网 页 ， 而 且 还 能 添 
加 更 智能 的 过 滤 选 项 。 单 击 “Search tools” 按 钮 后 ， 谷 歌会 显示 三 种 筛选 功能 ， 以 下 拉 列 表 形式 呈 
现 ， 恰好 位 于 搜索 结果 上 方 ( 见 图 3-10 )。 




















“本 到。 图 3-10: 搜索 一 个 菜 名 之 后 , 谷歌 
¢ 3 C [Bntps//wwwgooglecom/searchia-chickenpasaarbs rcpx3Aaneniatomatosot@ 9| 三 上 还 可 以 让 你 通过 匹配 的 食谱 中 包 
sYou Search Imeges Maps Play YouTube Hews Gmail Drive Calendar More- | 含 的 其 他 元 数据 来 对 结果 进行 过 
Google iomatosoup 医 国 | 滤 。 比 如 ， 搜 索 一 个 西红柿 汤 食 
一 -一 一 谱 ， 其 中 用 了 大 量 罗勒 ， 但 没有 
dt lo Wee” bessbiss 用 西红柿 汁 





图 tomato soup - Googleses x \ 
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Ingredients = Any cook time ~ Any calories ~ Clear 
Ingredients 

es- Tomato soup 
Basil VY co.uk/food/recipes/tomatosoup_13560 ~ 

sd 

Mozzarella and simple tomato soup recipe is perfect for using up a glut of 
Garlic mn tomatoes 
Eggs 5- basil onion, carrots, garlic, celery, olive oil, sugar, pepper 
Ciabatta 
Tabasco pepper Mozzarella Croutons | Whole Living 
Baguette eliving.com » Eat Well ~ 


Ss Je Lvings Tomato Soup with Mozzarella Croutons recipe. Also 
2 find healthy breakfast, lunch, snack, dinner & dessert recipes, plus heart 
healthy food ... 

|ngredients: basil, olive oil, pepper, garlic, onion, chicken, baguette 
mozzarella 


Roasted Tomato Soup with Garlic Recipe at Epicurious.com 
&menus ~ 

记 交 交 交 记 Rating: 3.4/4 - 96 reviews 

Find the recipe for Roasted Tomato Soup with Garlic and other garlic recipes at 
Epicurious.com 

Ingredients: basil, tomatoes, olive oil garlic, rosemary, thyme, crushed red .. 



































口 Ingredients( 原料 )。 可 以 选择 包含 或 不 包含 某 种 原料 的 菜 式 。 只 要 单 击 相应 原料 旁边 
Yes 和 No 的 小 复 选 框 即 可 。( 为 创建 这 个 原料 列表 ， 和 谷歌 要 从 你 的 搜索 结果 中 取得 最 常 
的 那些 原料 。) 

口 Any cook time ( 毫 饪 时 间 )。 可 以 找到 最 快捷 的 菜 式 ， 比 如 1 小 时 或 10 分 钟 之 内 。 

口 Any calorles ( 卡路里 )。 适 合 节 食 的 人 ， 可 以 选择 任意 热量 范围 。 

结果 , 语义 数据 为 互联 网 用 户 提供 了 非常 强大 的 信息 挖掘 支持 , 也 为 用 户 找到 你 的 网 页 提供 
了 更 有 效 的 方式 。 





带 
用 
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第 4 问 


理 





构建 更 好 的 Web 表 单 





TML 表 单 指 的 就 是 从 网 站 访客 那里 收集 信息 的 HTML 控 件 。 比 如 ， 可 以 填写 文本 的 文 
本 框 ， 可 以 选择 的 列表 框 ， 可 以 选中 或 取消 选中 的 复 选 框 。 在 Web 上 ， 表 单 让 人 们 可 
以 做 很 多 事情 ， 从 查询 股票 行情 到 购买 演唱 会 门票 。 
HTML 表 单 与 HTML 语 言 几 乎 是 同时 出 现 的 ， 但 到 了 20 世 纪 末 都 没有 丝毫 改进 。 这 期 间 的 几 
次 努力 也 以 失败 告终 。 制 定 Web 标 准 的 人 们 曾 耗 费 数 年 时 间 推 出 了 XForms，, 作为 HTML 表 单 的 升 
级 版 。 但 XForms 跟 XHTML 2 (人 参见 1.1.2 节 ) 一 样 单调 乏味 。 虽 然 XForms 确 实 能 解决 一 些 问 题 ， 
而 且 也 不 失 方便 和 优雅 ， 但 它 的 问题 也 很 多 。 比 如 ， 代 码 宛 长 ， 要 求 设计 人 员 熟 练 掌握 XML 。 
不 过 , 影响 它 推广 的 最 大 障碍 还 是 不 兼容 HTML 表 单 。 换 句 话 说 ,要 使 用 XForms 的 话 ， 开 发 人 员 
就 得 心 一 横 ， 眼 一 闭 ， 把 未 来 完全 交 给 一 个 新 的 模型 。 这 需要 极 大 的 勇气 ， 同 时 也 是 理想 主义 的 
一 种 表现 。 最 终 , 由 于 主流 浏览 器 根本 就 没有 实现 XForms 的 打算 ( 太 复 杂 , 实际 使 用 率 也 不 高 )， 
Web 开 发 人 员 也 就 从 来 没有 真正 面临 前 述 两 难 的 抉择 。 
HTML5S 采 取 了 完全 不 同 的 做 法 : 在 已 有 HTML 表 单 模型 基础 上 进行 修订 。 在 老 版 本 的 浏览 器 
中 使 用 HTML5 表 单 也 没有 问题 ， 只 不 过 没有 那么 多 增强 而 已 。( 这 是 件 好事 ， 因 为 IE10 之 前 的 版 
本 不 支持 任何 新 的 表单 功能 。 ) HTML5 表 单 还 新 增 了 一 些 实用 的 表单 特性 ， 在 此 之 前 ， 这 些 特 
性 需要 开发 人 员 引 入 一 堆 JavaScript 代 码 或 者 一 个 JavaScript 工 具 包 才能 实现 。 现 在 ，HTML5 让 
这 些 特性 很 容易 获得 。 
本 章 就 来 学 习 所 有 HTML5 表 单 的 新 功能 。 我 们 会 介绍 现 有 浏览 器 支持 哪个 功能 ， 不 支持 哪 
个 功能 ,而 为 了 弥补 现 有 的 差异 ， 可 以 使 用 什么 过 渡 方 案 。 此 外 ， 本 章 还 会 介绍 在 普通 网 页 中 髓 
人 富 HTML 编 辑 器 的 技术 ,但 严格 来 讲 ， 这 项 技术 不 是 HTML5 表 单 标准 中 规定 的 。 


4.1 理解 表单 


当然 ,可 能 有 的 读者 对 表单 并 不 陌生 。 不过, 假如 你 对 表单 理解 得 没有 那么 深 ,本 节 可 以 帮 
你 梳理 一 下 有 关 表 单 的 基本 知识 。 

我 们 通常 所 说 的 Web 表 单 ， 就 是 一 组 文本 框 、 列 表 、 按 钮 及 其 他 可 以 点 击 的 小 控件 ， 通过 这 
些小 控件 可 以 收集 网 站 访客 的 某 些 信息 。 表单 在 互联 网 上 是 随处 可 见 的 , 可 以 通过 表单 注册 电子 
邮件 账户 , 发 表 对 商品 的 评论 或 者 在 网 上 银行 完成 交易 。 谷 歌 的 搜索 表单 妨 怕 要 算是 世界 上 最 简 
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单 的 表单 了 一 一 只 有 一 个 文本 框 ( 图 4-1 )。 









































Ee 国 写 二 时 加 图 4-1， 谷 歌 简练 的 搜索 页 面 中 有 一 个 只 
We 一 | 包含 基本 元 素 的 表单 使 用 这 个 表单 跟 合 
IO nm Wen | 用 其 他 任何 表单 没有 区 别 输入 一 些 
| 文本 ( 在 这 里 是 要 搜索 的 关键 词 ), 然后 


点 击 按钮 提交 该 文本 


Google 














表单 输入 字段 。 表单 提交 按钮 














所 有 基本 表单 的 工作 方式 都 类 似 ， 即 用 户 填写 信息 然后 单 击 按钮 。 此 时 ,浏览 器 会 收集 用 户 
输入 的 信息 并 将 其 发 送 给 Web 服 务 器 。 在 服务 器 上 ， 有 软件 程序 负责 处 理 信息 ， 并 决定 下 一 步 的 
操作 。 服 务 器 端的 这 个 程序 可 能 要 联系 数据 库 ， 可 能 是 读 取 数据 也 可 能 是 写 人 数据 , 之 后 再 把 新 
页 面 发 送 给 浏览 器 。 

这 里 提 到 的 负责 处 理 通过 表单 提交 的 数据 的 服务 器 端 程序 可 没有 那么 简单 , 处 理 数据 的 方式 
不 下 几 百 种 。 有 些 程序 员 愿 意 使 用 纯 手 工 脚本 操作 原始 的 表单 数据 ,而 其 他 人 可 能 会 利用 服务 器 
端 语言 打包 好 的 模块 , 直接 处 理 封装 在 对 象 中 的 表单 数据 。 但 无 论 采 用 什么 方式 , 过 程 都 差不多 : 
检查 表单 数据 ， 对 数据 进行 某 种 处 理 ， 然 后 再 发 回 一 个 新 网 页 。 





















































注意 ”本 书 不 会 讨论 任何 服务 器 端的 编程 工具 。 实 际 上 ， 服 务 器 端 使 用 什么 工具 都 无 所 谓 ， 因 
为 你 要 使 用 的 表单 元 素 不 会 变 ， 而 这 些 元 素 要 遵守 的 HTML5 规 则 也 不 会 变 。 


使 用 JavaScript 绕 过 表单 提交 数据 
有 必要 提醒 大 家 一 下 ， 并 不 是 只 能 使 用 表单 向 Web 服 务 器 发 送 用 户 输 入 的 数据 (虽然 以 前 
是 这 样 )。 如 今 ， 熟 练 的 程序 员 都 使 用 XMLHttpRequest 对 象 (参见 12.1.1 节 )， 在 JavaScript 代 码 
中 静 悄 悄 地 跟 服 务 器 通信 谷歌 就 是 一 个 例子 , 它 采 用 这 种 技术 一 方面 取得 搜索 建议 , 就 是 显 
示 在 下 拉 列 表 中 的 建议 条 目 ; 另 一 方面 会 在 用 户 输 入 搜索 关键 词 的 过 程 中 即时 显示 结果 页 面 。 
当然 ， 你 得 开启 谷歌 的 即时 搜索 功能 才 行 (www.google.com/instant )。 
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像 Google Instant 这 样 通过 JavaScript 完 全 绕 过 表单 提交 数据 的 情况 并 不 少见 。 可 以 把 这 种 
技术 当做 一 项 功能 来 提供 给 用 户 ， 但 不 要 把 它 作 为 作 要 功能 。 原 因 很 简单 ，JavaScript 并 非 无 
潜 可 击 的 ( 比如， 在 网 过 慢 的 情况 下 可 能 会 有 些 奇 怪 的 现象 发 生 ), 而 且 还 有 一 少 部 分 人 的 济 
览 器 不 支持 或 关闭 了 JavaScript。 

最 后 还 要 说 一 铅 ， 页 面 中 包含 表单 ， 不 一 定 非 要 把 数据 提交 到 服务 器 。 相 信 你 见 过 习 
用 于 执行 简单 计算 的 页 面 (比如 抵押 贷款 利率 计算 器 )， 这 些 页 面 中 的 表单 不 需要 与 服 
信 ， 完 全 依靠 JavaScript 完 成 计算 并 在 页 面 中 显示 结果 。 

从 HTMLS 的 角度 来 看 ， 无 论 是 向 服务 器 提交 表单 ， 还 是 在 本 地 页 面 的 JavaScript 中 直接 使 
用 数据 ， 或 者 通过 XMLHttpRequest 对 象 将 它 传 国 服务 器 ， 真 的 都 无 所 谓 。 无 论 如 何 ， 都 需要 使 
用 标准 的 HTML 表 单 控件 来 构建 表单 。 


一 
上 后 
油 


x 
粥 
做 





4.2 传统 表单 翻新 


学 习 HTML5 表 单 的 最 佳 方式 ， 莫 过 于 找 一 个 现 有 的 例子 ， 然 后 加 以 改进 。 图 4-2 展 示 了 这 样 
一 个 有 待 改 进 的 例子 。 



























































] C\HTMLS\Chapter 04\ZooKeeperForm_Original.htm pr-o Ci 图 4-2 : 只 要 你 上 过 网 9 就 不 难 遇见 与 贸 中 的 “动物 
| | 园 管理 员 申 请 表 ” 类 似 的 表单 ， 它 负责 从 网 页 访客 那 
Zoo Keeper Application Form 里 收集 基本 的 信息 











Please complete the form. Mandatory fields are marked with a * 
CONTACT DETAILS 
Name+ 


Telephone 





Email * 

了 PERSONAL INFORMATION 

*Age 

de Female 国 

When did you 

first know you 

wanted to be a 

zoo-keeper? 
PICK YOUR FAVORITE ANIMALS 

Zebra Cat ] Anaconda D Human 

日 Elephant 日 Wildebeest ”日 Pigeon 日 Crab 


Submit Application 





























这 个 表单 的 标记 没有 什么 新 意 。 如 果 你 以 前 编写 过 表单 ， 在 这 里 就 不 会 看 到 任何 新 玩 艺 儿 。 
首先 ， 整 个 表单 被 包 六 在 一 个 <form> 元 素 里 : 


<form id="zooKeeperForm" action="processApplication.cgi"> 
<p><i>Please complete the form. Mandatory fields are marked with 
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a </i><em>*</em></p> 


<form> 元 素 用 于 组 织 所 有 表单 部 件 ( 也 称 为 控件 或 字段 )， 负 责 告 诉 浏览 器 把 数据 提交 到 哪 
里 , 方法 是 在 action 属 性 中 提供 一 个 URL。 假如 你 只 想 在 客户 端 使 用 JavaScript 操 作 表 单 ， 那么 只 
要 在 action 属 性 里 指定 一 个 井 号 (#) 即 可 。 











注意 HTML5 新 增 了 一 种 机 制 ， 支 持 把 表单 控件 放 在 它 所 在 的 表单 外 面 。 方法 是 使 用 新 的 form 
属性 引用 表单 的 ID 值 (如 form="zooForm" )。 不 过 ， 如 果 浏 览 器 没有 实现 这 种 机 制 ， 提 交 
表单 时 就 会 忽略 这 些 数据 。 换 和 句 话 说， 这 个 小 的 改进 还 不 适合 在 真正 的 网 页 中 应 用 。 








像 前 面 “动物 园 管理 员 申 请 表 ” 这 样 精心 设计 的 表单 ， 都 会 使 用 cfieldset> 元 素 划分 几 个 逻 
辑 块 。 每 个 块 都 有 一 个 放 在 <legend> 元 素 中 的 标题 。 以 下 是 Contact Details 部 分 的 <fieldset> 元 素 
( 其 结果 如 图 4-3 所 示 ): 




















<fieldset> 
<legend>Contact Details</legend> 
<label for="name">Name <em>*</em></label> 
<input id="name"><br> 
<label for="telephone">Telephone</label> 
<input id="telephone"><br> 
<label for="email">Email <em>*</em></label> 
<input id="email"><br> 












































</fieldset> 
<label> <legend> <fieldset> <input> 图 4-3: 这 个 <fieldset> 元 素 收 集 
一 广 百 位 自 这 由] 
CONTACT DETAILS 三 方面 信息 : 名 字 、 电话 和 电子 邮 
es 个。 每 条 信息 都 有 一 个 文字 说 明 
ame 
( 包含 在 clabel> 元 素 里 ) 和 一 个 负 
Teleph i 和 g 
ee 责 收 集 数据 的 控件 ( 使 用 cinput>、 
ee <textarea> 或 <select> 元 素 ) 




















在 任何 表单 里 , 通用 的 <input> 元 素 都 要 承担 大 部 分 工作 。 通过 <intput> 可 以 收集 文本 , 创建 
复 选 框 、 单 选 按 钮 和 其 他 按钮 。 除了 <input> 元 素 , 可 以 使 用 ctextarea> 元 素 让 用 户 输入 多 行文 本 ， 
而 使 用 <select> 元 素 则 可 以 创建 选择 列表 。 想 回顾 这 些 表单 元 素 的 读者 ， 可 以 参考 表 4-1。 


表 4-1 表单 控件 


控 件 HTML 元 素 说 明 
单行 文本 框 <input type="text"> 显示 文本 框 ， 用 户 可 以 在 其 中 填写 内 容 。 如 果 是 密码 类 型 的 文 
<input type="password"> 本 框 ， 浏 览 器 就 不 会 显示 用 户 输入 的 文本 ， 而 是 用 星 号 (*) 或 
点 号 〈(') 来 代替 每 个 字符 
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控件 HTML 元 素 说 明 

多 行文 本 框 <textarea>...</textarea> 显示 大 文本 框 ， 可 以 输入 多 行文 本 

复 选 框 <input type="checkbox"> 显示 复 选 框 ， 可 以 作为 开关 ， 选 中 或 取消 选中 

单 选 按钮 <input type="Tadio > 显示 单 选 按钮 (一 个 空心 圆 ， 可 以 选中 或 取消 选中 ) 。 一 般 单 














选 按钮 都 是 成 组 出 现 的 , 每 一 组 单 选 按钮 都 有 相同 的 name 属 性 ， 




































































用 户 只 能 选择 其 中 一 个 
按钮 <input type= "Submit > 显示 标准 的 可 以 单 击 的 按钮 ， 其 中 类 型 为 submit 的 提交 按钮 用 
<input type="image"> 于 收集 表单 数据 , 并 将 它们 发 送 给 指定 目标 ， 类 型 为 image 的 图 
<input type="reset"> 像 按 钮 与 提交 按钮 作用 相同 ， 但 可 以 显示 成 一 幅 可 以 单 击 的 图 
<input type="button"> 像 而 非 按钮 ;类 型 为 Teset 的 重 置 按钮 ,用 于 清除 用 户 的 选择 和 


已 经 输入 的 文本 信息 ， 而 类 型 为 button 的 按钮 本 身 没 有 任何 功 
能 ， 但 可 以 通过 JavaScript 给 它 赋予 功能 


列表 <select>...</select> 显示 一 个 选择 列表 ， 用 户 可 以 从 中 选择 一 或 多 个 列表 项 。 每 个 
列表 项 用 <option> 元 素 添加 


以 下 是 “动物 园 管理 员 申 请 表 ” 的 剩余 标记 ,包含 了 一 些 新 元 素 ( 如 <select> 列 表 、 复 选 框 
和 提交 表单 的 按钮 ): 











<fieldset> 
<legend>Personal Information</legend> 
<label for="age"><em>*</em>Age</label> 
<input id="age"><br> 
<label for="gender">Gender</label> 
<select id="gender"> 
<option value="female">Female</option> 
<option value= "male">Male</option> 
</select><br> 
<label for="comments">When did you first know you wanted to be a 
zo0-keeper?</label> 
<textarea id="comments"></textarea> 
</fieldset> 


<fieldset> 
<legend>Pick Your Favorite Animals</legend> 
<label for="zebra"><input id="zebra" type="checkbox"> Zebra</label> 
<label for="cat"><input id="cat" type="checkbox"> Cat</label> 
<label for="anaconda"><input id="anaconda" type="checkbox"> Anaconda 
</label> 
<label for="human"><input id="human" type="checkbox"> Human</label> 
<label for="elephant"><input id="elephant" type="checkbox"> Elephant 
</label> 
<label for="wildebeest"><input id="wildebeest" type="checkbox"> 
Wildebeest</label> 
<label for="pigeon"><input id="pigeon” type="checkbox"> Pigeon</label> 
<label for="crab"><input id="crab" type="checkbox"> Crab</label> 

</fieldset> 

<p><input type="submit" value="Submit Application"></p> 

</form> 








4. 
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访问 本 书 在 线 示例 网 站 : http://prosetech.com/html5， 可 以 看 到 完整 的 示例 及 简单 的 样式 表 。 
其 中 ，ZookeperForm_Original.html 是 传统 的 没有 经 过 改进 的 表单 ， 而 ZookeperForm_Revised.html 
包含 的 则 是 使 用 HTML5 表 单元 素 之 后 的 新 表单 。 





注意 HTML 表单 有 一 个 限制 ， 就 是 不 能 修改 浏览 器 呈现 控件 的 方式 。 例 如 ， 你 想 把 标准 的 傻 
里 傻 气 的 灰色 复 选 框 蔡 换 成 一 个 又 大 又 醒目 的 黑白 框 ， 再 配 上 粗大 的 对 名 图 标 。 对 不 起 ， 
HTML 不 支持 。( 解决 方案 是 使 用 JavaScript 来 创建 一 个 与 复 选 框 具有 相同 行为 的 常规 元 
素 ， 换 名 话说 ， 就 是 在 用 户 单 击 该 元 素 时 来 回 切换 这 个 元 素 的 外 观 。) 

HTML5S 仍 然 没 有 打破 这 个 不 能 自 定义 的 限制 ， 但 新 增 了 一 些 本 章 将 会 介绍 的 新 控件 。 对 
于 需要 自由 定制 控件 样式 和 希望 统一 页 面 外 观 的 人 ， 普 通 的 HTML5 表 单 不 合适 。 相 反 ， 
他 们 需要 一 个 类 似 jQuery UI 的 JavaScript 工 具 包 。 


看 完了 这 个 真正 的 表单 示例 之 后 ， 接 下 来 我 们 就 要 动手 用 HTML5 来 改进 它 了 。 以 下 儿 方 先 
从 小 的 占 位 符 文本 和 自动 获得 焦点 的 字段 开始 。 


4.2.1 通过 占 位 符 文 本 添加 提示 


表单 一 开始 通常 都 是 空 的 , 但 一 扒 空 空 如 也 的 文本 框 看 起 来 会 让 人 心里 发 慌 , 特别 是 在 文本 
框 归属 关系 不 清 的 时 候 尤 其 如 此 。 所 以 , 我 们 经 常 也 可 以 看 到 一 些 文本 框 里 预先 带 有 一 段 提示 性 
文本 。 这 种 占 位 符 文 本 也 叫做 水 印 ， 因 为 这 些 文本 的 颜色 一 般 是 浅 灰色 的 , 用 以 区 别 用 户 真正 输 
入 的 文本 。 图 4-4 展 示 了 占 位 符 文本 。 

要 创建 占 位 符 ， 使 用 placeholder 属 性 : 


<label for= "name">Name <em>*</em></label> 

<input id="name" placeholder="Jane Smith"><br> 

<label for="telephone">Telephone</label> 

<input id="telephone" placeholder="(xxx) xxx-xxxx"><br> 


不 支持 placeholder 属 性 的 浏览 器 会 忽略 它 ; IE (IE10 之 前 的 版 本 ) 的 可 能 性 最 大 。 好 在 占 位 
符 文 本 并 非 不 可 或 缺 , 没有 它 也 不 会 影响 到 表单 的 基本 功能 。 假 如 你 真 想 要 占 位 符 文本 , 实际 上 
也 有 很 多 JavaScritp 补 丁 可 以 让 IE 支 持 ， 参 见 http://tinyurl.com/polyfills。 

目前 ,还 没有 标准 的 统一 方式 来 改变 占 位 符 文本 的 样式 (例如 把 它们 变 成 斜体 或 换 成 其 他 
颜色 )。 但 浏览 器 开发 商 最 终 会 提供 一 个 应 用 CSS 样 式 的 挂钩 一 一 事实 上 ， 你 在 看 本 书 的 时 候 ， 
可 能 他 们 正在 商讨 具体 的 实现 方案 呢 。 如 果 你 现在 就 有 需求 , 可 以 使 用 特定 于 浏览 器 的 伪 类 ( 即 
Chrome 浏 览 唤 的 -webkit-input-placeholder、IE 浏 览 器 的 -ms-input-placeholder 和 Firefox 浏 
览 锅 的 -moz-placeholder )。 附录 A 有 关于 伪 类 的 详细 介绍 ,6.1 节 介绍 了 特定 浏览 器 样式 的 尴 众 
局 面 。 
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Cp 图 4-4: 上 : 如 果 文 本 框 中 没 
Name* 内 容 ， 就 显示 占 位 符 广 









































Telephone 本 ， 如 Name 和 Telephone 字 段 

所 示 ; 下 : 在 用 户 单 击 文本 
框 后 ( 文本 框 获得 焦点 ) ， 
占 位 符 文本 消失 ， 当 焦点 转 











换 到 下 一 个 文本 框 时 ， 如 果 
文本 框 仍然 是 空 的 ， 则 占 位 
符 文 本 又 会 出 现 








CoNTACT DETAILS 





Name* | 


Telephone 





Email * 











话说 回来 ， 使 用 被 支持 得 更 好 的 focus 伪 类 ， 可 以 在 文本 框 获得 焦点 时 轻松 改变 其 样式 。 例 
如 ， 可 以 让 文本 框 的 背景 变 成 次 色 ， 以 便 更 加 显眼 : 
input:focus { 


background: #eaeaea; 


} 








用 好 占 位 符 

并 不 是 每 个 文本 框 都 需要 占 位 符 ， 应 该 利用 占 位 符 来 消除 歧义 。 例 如 ,，“ 姓 ”这 个 文本 框 
不 用 多 加 解释 ， 而 “名 字 ” (和 如 图 4.4 中 的 Name ) 就 不 是 那么 明确 了 。 占 位 符 文 本 告诉 用 户 : 
名 和 姓 之 间 要 留 一 个 空格 。 

在 某 些 情况 下 , 占 位 符 则 是 一 个 示例 值 , 即 用 户 可 能 真 的 会 输入 的 值 ,比如 ,微软 的 Hotmail 
登录 页 面 (www.hotmail.com ) 使 用 文本 someone(@example.com 作 为 占 位 符 ， 说明 你 应 该 在 输 
入 框 中 输入 你 的 邮箱 地 址 ， 而 不 是 你 的 名 字 或 其 他 信息 。 

另外 ， 占 位 符 可 以 用 来 表示 值 的 格式 。 图 4-4 中 的 电话 号 码 占 位 符 (XXX) XXX-XXXX 表 示 电 话 
号 码 应 该 由 三 位 数字 的 区 号 开头 , 后 跟 三 位 ,再 跟 四 位 数字 。 这 种 占 位 符 不 一 定 表示 不 能 接受 
其 他 格式 的 输入 ,但 却 能 够 给 用 户 一 个 格式 方面 的 建议 。 

应 该 避免 用 占 位 符 去 做 两 件 事 儿 。 一 是 不 要 用 它 代 替 字 段 描 述 或 说 明 。 比 如 ， 对 于 一 个 收 
集 信 用 卡 安全 码 的 文本 框 ,“ 您 的 卡 背面 的 三 位 数字 ”并 不 适合 以 占 位 符 形 式 出 现 。 可 以 考虑 
把 它 放 在 输入 框 下 面 ， 或 者 把 这 句 话 作为 title 属 性 的 值 ， 当 用 户 鼠 标 悬 停 到 字段 上 时 ， 弹 出 
一 个 窗口 来 告诉 用 户 应 该 输入 什么 

<label for="promoCode">Promotion Code 

</label> 

<input id="promoCode" placeholder="QRBOO1" 


title="Your promotion code is three 
letters followed by three numbers"> 
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二 是 不 要 为 了 表示 占 位 符 不 是 真正 的 内 容 , 就 选择 特殊 字符 作为 占 位 符 。 比如， 有 些 网 站 
中 使 用 [Jonh Smith] 而 不 是 John Simth， 想 用 方 括号 强调 这 个 占 位 符 只 是 一 个 例子 。 这 种 做 法 很 
容易 让 人 迷惑 。 


4.2.2 焦点 : 挑选 正确 的 起 点 


加 载 完 表单 之 后 ， 用 户 要 做 的 第 一 件 事 儿 就 是 填写 表单 。 然 而 ， 除 非 用 户 按 下 Tab 切 换 到 第 
一 个 控件 ， 或 者 在 其 中 单 击 一 下 鼠标 ， 从 而 让 第 一 个 控件 获得 焦点 ， 否 则 就 不 能 输入 。 

在 相应 的 <input> 元 素 上 通过 JavaScript 调 用 focus() 方 法 ， 可 以 帮 用 户 完成 焦点 切换 。 但 这 样 
就 得 编写 代码 ， 而 且 有 时 还 会 出 现 问题 。 比 如 ， 在 调用 focus() 方 法 之 前 ， 用 户 已 经 单 击 了 其 他 
控件 并 开始 输入 的 情况 也 可 能 发 生 。 这 时 便 性 地 把 焦点 切换 到 第 一 个 控件 显得 很 粗鲁 。 但 如 果 浏 
览 句 自己 能 控制 焦点 ， 它 就 可 以 在 用 户 操作 之 前 ， 先 把 焦点 给 予 正确 的 控件 。 

这 就 是 HTML5 添 加 autofocus 属 性 的 初 囊 ,但 只 能 给 一 个 cinput> 或 <textarea> 元 素 添 加 这 个 
属性 : 


<label for="name">Name <em>*</em></label> 
<input id="name" placeholder="Jane Smith" autofocus><br> 


与 placeholder 属 性 一 样 , 除了 IE9 及 其 更 早 的 版 本 , 其 他 浏览 器 都 支持 autofocus 属 性 。 同样 ， 
对 于 于 还 是 有 办 法 的 。 可 以 使 用 Modernizr ( 参考 1.6.3 节 ) 检测 浏览 器 是 否 支 持 autofocus ， 然 后 
自己 编写 脚本 实现 。 也 可 以 使 用 别人 已 经 开发 好 的 JavaScript 程 序 ( http://tinyurl.com/polyfills )。 
不 过 , 很 少 有 人 为 了 这 点 功能 如 此 兴 师 动 众 ， 除 非 你 也 想 让 相 E 支 持 其 他 表单 功能 ， 比 如 下 面 要 讨 
论 的 数据 验证 。 


4.3 验证 : 阻止 错误 


表单 中 的 字段 是 为 了 从 网 页 访客 那里 收集 信息 的 。 但 是 , 无论 你 多 么 彬 彬 有 礼 地 询问 ， 都 可 
能 得 不 到 想 要 的 结果 。 人 性子 急躁 的 或 者 糊 里 糊涂 的 访客 ， 有 可 能 跳 过 重要 的 部 分 ， 只 填写 少量 信 
息 , 或 者 只 是 不 小 心 按 错 了 键 。 最 后 怎么 样 ? 他 单 击 了 “提交 ”按钮 ， 你 的 网 站 收集 到 了 一 堆 乱 
七 八 糟 的 数据 。 

很 多 网 页 都 需要 验证 , 就 是 在 发 生 错误 时 捕捉 到 它 ( 而 更 好 的 方案 是 防止 出 错 )。 很 多 年 来 ， 
开发 人 员 都 要 自己 写 JavaScript 验 证 脚本 ， 有 时 候 也 会 用 到 专业 的 JavaScript 库 。 应 该 说 ， 这 些 验 
证 方法 效果 都 非常 好 。 然 而 ， 鉴 于 验证 是 那么 常用 ( 可 能 要 对 每 个 人 都 做 错误 检查 )， 验 证 解决 
的 问题 是 那么 集中 ( 例如， 发 现 无 效 的 电子 邮件 或 日 期 )， 以 及 编写 验证 脚本 那么 讨厌 (没有 人 
真心 喜欢 为 每 个 表单 都 编写 一 遍 同样 的 代码 ， 更 不 要 说 测试 这 些 脚本 了 )， 因 此 这 个 问题 一 定 还 
有 改进 的 空间 。 

HTML5 规 范 的 制定 者 决定 让 浏览 器 帮 忙 解决 这 些小 问题 ， 以 后 就 不 用 让 开发 人 员 操 心 了 。 
为 此 , 他 们 设计 了 一 套 客户 端 验证 方法 (参见 后 面 的 “在 两 个 地 方 验证 ”), 让 我 们 可 以 在 <input> 
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字段 里 能 入 常用 的 错误 检查 规则 。 而 且 , 能 入 验证 规则 的 方法 很 简单 , 只 要 指定 正确 的 属性 就 行 。 
4.3.1 HTML5 验证 的 原理 

HTML5 表 单 验 证 的 基本 原理 就 是 你 来 告诉 浏览 需要 验证 哪个 字段 ， 但 具体 验证 的 细节 ， 你 
不 用 管 。 这 就 像 是 提拔 你 当 了 领导 ， 只 不 过 没 给 你 涨 工资 。 


例如 ， 你 决定 某 个 字段 不 能 留 空 ， 意 味 着 用 户 必须 填 上 点 什么 。 在 HTML5 中 ， 可 以 通过 
required 属 性 贯彻 你 这 个 指示 : 
































<label for="name">Name <em>*</em></label> 
<input id="name" placeholder="Jane Smith" autofocus required><br> 





在 两 个 地 方 验证 
多 少年 来 , 敬业 的 开发 人 员 已 经 找到 很 多 解决 验证 问题 的 方法 。 今天 ,大 家 都 有 了 明确 的 
共识 。 那 就 是 ， 要 想 让 表单 万 无 一 失 ， 就 需要 在 两 个 地 方 验 证 。 
口 客户 端 验 证 。 客户 端 验 证 就 是 在 浏览 器 中 检查 错误 , 没有 错误 再 提交 。 客 户 端 验证 的 目 
的 是 减少 填 表 人 的 麻烦 。 因 为 填 表 人 要 知道 哪儿 填 得 不 对 , 不必 填 完 30 多 个 文本 框 再 提 
交 ， 而 是 随 填 随 提 示 了 。 也 就 是 说 ， 可 以 在 出 错 的 字段 旁边 显示 一 条 类 似 帮 助 的 消息 ， 
提醒 填 表 人 在 提交 表单 之 前 纠正 错误 。 
口服 务 器 端 验证 。 这 是 在 用 户 将 数据 提交 给 服务 器 之 后 进行 的 验证 。 此 时 ， 服 务 器 端 代码 
要 负责 检查 所 有 细节 ,确保 在 进行 下 一 步 操 作 之 前 所 有 数据 都 是 有 效 的 。 无 论 浏览 器 做 
不 做 验证 , 服务 器 端 难 证 都 是 必 不 可 少 的 。 这 是 预防 别有用心 的 人 故意 自 改 数据 的 唯一 
途径 。 如 果 服 务 器 端 验 证 检测 到 问题 ， 就 向 浏览 器 发 回 一 个 包含 错误 消息 的 页 面 。 
简 言 之 ， 客 户 端 验证 (包括 HTML5 表 单 验证 ) 是 为 访客 提供 方便 的 ， 而 服务 器 端 验证 才 
是 确保 数据 正确 性 的 。 最 关键 的 是 ,要 知道 这 两 个 地 方 的 验证 缺 一 不 可 一 除非 你 的 表单 极其 
简单 ， 而 且 不 担心 数据 有 错误 或 者 有 错误 问题 也 不 大 。 


























一 开始 并 没有 什么 可 见 的 提示 告诉 用 户 这 是 一 个 必 填 字段 。 为 此 ， 我 们 应 该 给 出 一 些 提示 ， 
比如 为 文本 框 应 用 不 同 的 边框 颜色 或 者 在 字段 旁边 放 一 个 星 号 ( 就 像 前 面 “动物 园 管理 员 申 请 表 ” 
一 样 hs 

当 填 表 人 单 击 提交 按钮 时 ， 验 证 才 发 挥 作用 。 如 果 浏 览 絮 支持 HTML5 表 单 ， 当 它 发 现 有 一 
个 必 填 字段 为 空 时 ， 它 会 拦截 提交 ， 并 在 无 效 字 段 旁 边 显 示 一 个 提示 ， 如 图 4-5 所 示 。 

下 面 几 节 会 介绍 , 不 同 的 属性 表示 不 同 的 验证 规则 。 可 以 给 一 个 输入 框 应 用 多 种 规则 ， 而 一 
种 规则 可 以 应 用 给 多 个 <input> 元 素 (或 者 <textarea> 元 素 )。 提 交 表 单 之 前 ， 所 有 验证 条 件 都 必 
须 满足 。 

而 这 就 引发 了 一 个 有 意思 的 问题 : 如 果 表 单数 据 违反 了 多 个 规则 会 出 现 什么 结果 一 一 比如 有 
多 个 必 填 字段 都 空 着 ? 

同样 ， 在 用 户 填 写 完 表单 并 单 击 提交 之 前 ， 什 么 都 不 会 发 生 。 只 有 单 击 “ 提 交 ” 按 钮 ， 才 会 
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触发 浏览 需 去 从 上 到 下 地 验证 表单 数据 。 只 要 发 现 一 个 无 效 的 值 ， 它 就 会 停 下 来 ,不 再 继续 验证 
其 他 字段 。 同 时 ， 它 会 取消 提交 操作 ， 并 在 无 效 值 的 旁边 显示 一 条 错误 消息 。( 此 外 ， 如 果 有 问 
题 的 文本 框 不 在 当前 视 口 中 ， 则 浏览 器 会 深 动 到 它 正 好 位 于 页 面 项 部 。) 用 户 纠正 了 输入 错误 并 
再 次 单 击 “提交 ”按钮 后 ， 浏 览 圳 会 在 下 一 个 无 效 的 值 处 停 下 来 ， 再 次 给 出 错误 提示 。 











CONTACT DETAILS 图 4-5: 这 里 是 相同 的 必 


Name* [ | 盾 字 段 在 Chrome ( 上 ) 、 


a 态 和 IE (中 ) 和 Firefox (下 ) 

P This is a required field a 中 的 样式 。 浏览 器 采用 什 
Email* 么 方式 提醒 用 户 , 在 规范 
里 没有 限制 , 但 这 三 个 浏 


览 器 都 使 用 了 类 似 提 示 
条 的 弹出 框 。 可 惜 的 是 ， 























CoNTACT DETAILS 














RE 我 们 不 能 修改 这 个 弹出 
Telephone Please fill in this field. 框 的 样式 , 也 不 能 修改 验 

















台 E 
有 


CONTACT DETAILS 





hane Smith 


Name* 


Telephone | Pleasefill out thisfield. | 


Email * | 














注意 ”只 有 用 户 单 击 “ 提 交 ” 按 钮 ， 浏 览 器 才 会 执行 验证 。 这 样 可 保证 验证 的 效率 ， 同 时 也 比 
较 适 度 ， 因 而 所 有 人 都 可 以 使 用 。 
有 些 人 喜欢 在 用 户 输入 错误 并 离开 ( 当 他 们 按 Tab 切 换 焦 点 或 单 击 网 页 中 其 他 地 方 ) 相应 
字段 时 马上 给 出 提示 。 对 于 比较 长 的 表单 ， 特 别 是 用 户 可 能 会 在 多 个 不 同 字段 中 犯 相 同 
错误 的 情况 下 ， 这 种 方法 很 有 必要 。 遗 憾 的 是 ，HTMLS5 不 支持 指定 验证 的 时 机 ， 但 将 来 
倒是 有 这 个 可 能 。 目 前 ， 如 果 想 要 即时 显示 验证 消息 ， 最 好 还 是 自己 编写 JavaScript 或 选 
择 一 个 不 错 的 JavaScript 库 。 


4.3.2 ”关闭 验证 


有 些 情 况 下 ， 可 能 需要 禁用 验证 功能 。 比 如 , 在 测试 服务 需 端 代码 能 和 否 适当 处 理 无 效 数 据 的 
时 候 , 就 需要 关闭 客户 端 验证 。 要 禁用 整个 表单 的 验证 功能 , 可 以 在 <form> 元 素 中 添加 novalidate 
属性 : 
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<form id="zooKeeperForm" action="processApplication.cgi" novalidate> 

另外 ， 也 可 以 考虑 增加 另外 一 个 提交 按钮 来 绕 过 验证 。 这 个 办 法 有 时 候 对 网 页 是 很 有 用 的 。 
比如 , 可 以 给 出 一 个 正式 的 提交 按钮 , 强制 对 表单 进行 严格 验证 , 而 同时 再 给 出 男 一 个 提交 按钮， 
实现 其 他 功能 ( 如 保存 未 完成 的 数据 ， 以 便 将 来 使 用 )。 要 添加 这 个 额外 的 按钮 ， 可 以 在 表示 相 
应 按钮 的 cinput> 元 素 中 添加 formnovalidate 属 性 : 

<input type="submit" value="Save for Later" formnovalidate> 

好 了 ,现在 已 经 介绍 了 怎么 通过 验证 来 捕获 缺失 的 信息 。 接 下 来 ,我们 讨论 如 何 查找 不 同类 
型 数据 中 的 错误 。 

















不 过 ， 倒 是 有 一 


注意 ”什么 ， 你 想 验证 数值 ? 唉 ， 没 有 了 验证 规则 强制 文本 中 必须 包含 数字 
这 个 新 数据 类 型 的 支持 


个 新 的 number 数 据 类 型 ，4.4.5 节 会 讨论 到 。 可 惜 的 是 ， 浏览 器 对 
还 不 好 。 


4.3.3 ”验证 样式 挂钩 


虽然 我 们 无 法 修改 验证 消息 的 样式 ， 但 却 可 以 根据 输入 字段 是 否 已 验证 来 改变 它们 的 外 观 。 

比如 , 在 输入 的 值 无 效 时 可 以 换 一 种 背景 颜色 ， 只 要 浏览 器 一 检测 到 问题 ,文本 框 的 背景 颜色 就 

会 立刻 改变 。 

为 此 ， 只 要 使 用 几 个 新 的 伪 类 即 可 〈 关 于 伪 类 ， 请 参考 附录 A )， 可 以 使 用 的 伪 类 如 下 。 

口 required ( 必 填 ) 和 optional ( 选 填 ): 根据 字段 中 是 否 使 用 了 required 属 性 来 应 用 不 同 的 

样式 。 

口 valid (有效 ) 和 invalid (无 效 ): 根据 控件 中 是 否 包 含 错误 来 应 用 不 同 的 样式 。 注 意 ， 
除非 访客 提交 表单 ， 否 则 大 多 数 浏 览 器 并 不 会 发 现 哪 些 值 有 效 ， 哪 些 值 无 效 ; 换 句 话说 ， 
访客 不 会 实时 看 到 表示 输入 无 效 的 样式 变化 。 

D in-range (在 范围 内 ) 和 out-of-range (超出 范围 ): 根据 控件 的 min 和 max 属 性 判断 输入 值 
是 否 超 出 范围 ， 从 而 为 控件 应 用 样式 (参见 4.5.5 节 )。 
举 个 例子 , 假如 你 想 为 一 个 必 填 的 <input> 元 素 应 用 浅黄 色 背 景 ,， 就 可 以 为 required 伪 类 定义 

一 条 样式 规则 : 

input:required { 


background-color: lightyellow; 
} 


或 者 ， 如 果 你 只 想 突出 显示 那些 必 填 且 当 前 填 入 了 无 效 值 的 字段 ,那么 可 以 像 下 面 这 样 把 
required 和 invalid 伪 类 组 合 起 来 : 


input:required:invalid { 
background-color: lightyellow; 
} 
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有 了 这 条 规则 ， 空 着 的 字段 就 会 自动 高 亮 ， 因 为 这 些 字段 违反 了 必 填 字段 的 规则 。 

可 以 灵活 运用 上 述 技巧 ， 比 如 组 合 valid 伪 类 与 focus 伪 类 ,或 者 为 表示 无 效 的 值 使 用 一 个 带 
错误 图 标的 偏 移 背 景 。 当 然 , 还 有 一 个 忠告 : 可 以 使 用 这 些 伪 类 增强 页 面体 验 , 但 要 保证 页 面 没 
有 它们 也 照样 很 好 一 一 旧版 本 的 浏览 器 不 支持 ! 


4.3.4 使 用 正则 表达 式 


HTML5 支 持 的 最 强大 (也 最 复杂 ) 的 验证 方法 是 正则 表达 式 。 有 既然 JavaScript 支 持 正 则 表达 
式 ， 那 么 为 HTML 表 单 添加 这 项 功能 也 在 情理 之 中 。 

所 谓 正 则 表达 式 ， 就 是 一 种 用 正则 表达 式 语 言 编 写 的 文本 模式 。 正 则 表达 式 的 用 途 是 匹配 文 
本 一 一 比如 , 可 以 用 正则 表达 式 验 证 邮政 编码 中 包含 正确 的 字母 和 位 数 , 或 者 验证 电子 邮件 地 址 
中 包含 一 个 @ 符 号 和 一 个 至 少 两 个 字母 的 域名 后 级 。 还 是 看 一 个 正则 表达 式 吧 : 

[A-Z]{3}-[0-9]{3} 

开头 的 方 括号 定义 了 人 允许 的 字符 范围 。 换 名 话说 ，[A-Z] 就 是 允许 从 A 到 Z 的 任意 字母 。 随 后 
的 花 括号 表示 允许 几 个 字符 ，13} 当 然 表 示人 允许 3 个 大 写字 母 。 接 下 来 的 短 横 线 没有 特殊 的 含义 ， 
就 表示 三 个 大 写字 母后 面 必须 有 一 个 短 横 线 。 最 后 ，[0-9] 表 示人 允许 一 个 0 到 9 的 数字 ， 而 {3} 要 求 
必须 是 3 个 数字 。 

正则 表达 式 经 常用 于 搜索 ( 在 长 文档 中 查找 匹配 模式 的 文本 ) 和 验证 ( 验证 某 个 值 匹 配 模式 )。 
HTML5 表 单 使 用 正则 表达 式 来 验证 。 



























































[ 鹉 




















注意 ”正则 表达 式 极 客 请 听 好 一 一 不 必 使 用 * 和 $ 字 符 表示 要 匹配 字段 值 的 开头 和 结尾 。HTML5S 
会 自动 确保 这 一 点 。 实 际 上 ， 这 就 是 说 正则 表达 式 匹配 的 是 字段 中 完整 的 值 ， 验 证 的 也 
是 整个 值 的 有 效 性 。 





好 ， 下 面 这 些 值 都 是 有 效 的 ， 因 为 它们 与 上 面 的 模式 匹配 : 


ORB-001 
TTT-952 
LAA-000 


LA5-000 

常用 的 正则 表达 式 很 可 能 比 这 个 例子 所 展示 的 复杂 。 而 且 ， 编 写 正 则 表达 式 本 身 也 很 烦琐 。 
正 因 为 如 此 ,大 多 数 开发 人 员 都 愿意 搜索 一 个 现成 的 正则 表达 式 来 验证 相关 的 数据 类 型 。 要 不 然 ， 
也 会 找 别人 帮忙 。 
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提示 要 想 轻 松 学 习 正 则 表达 式 语言 的 基本 规则 ， 能 够 编写 简单 的 表达 式 ， 可 以 参考 以 下 简明 


教程 : http:/www.w3schools.com/js/js_obj regexp.asp 或 http://tinyurl.com/jsregex。 要 想 找 一 
些 现成 的 正则 表达 式 ， 用 在 自己 的 表单 里 ， 可 以 访问 http://regexlib.com/。 要 想 成 为 一 名 
正则 表达 式 高 手 ， 可 以 看 《精通 正则 表达 式 》( Jeffrey Friedl 著 ，O’”Reilly 英 文 版 ; 余 鼠 译 ， 

电子 工业 出 版 社 中 文 版 )。 





找到 或 写 好 一 个 正则 表达 式 之 后 , 可 以 通过 pattern 属 性 将 其 应 用 到 <input> 或 <textarea> 元 素 : 


<label for="promoCode">Promotion Code</label> 
<input id="promoCode" placeholder="QORB-001" title= 


"Your promotion code is three uppercase letters, a dash, then three numbers" 
pattern="[A-Z]{3}-[0-9]{3}"> 


图 4-6 展 示 了 输入 的 值 违反 正则 表达 式 规 则 后 的 结果 。 











提示 浏览 器 不 会 验证 空 值 。 在 这 个 例子 中 ,不 输入 折扣 号 ( Promotion Code ) 可 以 通过 验证 。 
如 果 这 不 是 你 希望 的 结果 ， 那 么 就 要 同时 指定 pattern 和 required 属 性 。 














] 图 4-6: 聪 明 的 浏览 如 这 里 的 Chrome ) 不 
Promotion Code Be 仅 能 捕获 错误 , 还 能 从 title 属 性 中 提取 文本 
Please match the 并 显示 出 来 9 以 名 已 0 的 人 


requested format. 

















Your promotion code is three 
letters, a dash, then three 
numbers 

















注意 正则 表达 式 似 乎 能 完美 地 匹配 电子 邮件 地 址 ( 确实 也 是 )， 尽管 如 此 ， 建 议 大 家 也 不 要 用 


正则 表达 式 ， 因 为 HTML5 专 门 定 义 了 一 个 用 于 输入 电子 邮件 地 址 的 输入 类 型 ， 当 然 已 经 
内 置 了 正确 的 正则 表达 式 ( 具体 请 参见 4.5.1 节 )。 


4.3.5” 自 定义 验证 




















HTML5 规 范 也 规定 了 一 组 JavaScript 属 性 ， 通 过 它们 可 以 知道 字段 是 否 有 效 ( 或 强制 浏览 需 
验证 这 些 字 段 )。 其 中 最 常用 的 是 setCustomValidity() 方 法 ， 基 于 这 个 方法 可 以 针对 特定 字段 编 
写 日 定义 的 验证 逻辑 ， 并 利用 HTML5 的 验证 机 币 
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下 面 来 看 看 怎么 自 定义 验证 。 首 先 ， 要 检查 相应 字段 是 否 有 错 ， 为 此 需要 处 理 onInput 事 件 ， 
没有 什么 要 解释 的 : 
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<label for="comments">When did you first know you wanted to be a 


zookeeper?</label> 
<textarea id="comments" oninput="validateComments(this)" ></textarea> 


这 里 ，onInput 事 件 会 触发 一 个 名 为 validateComments() 的 函数 。 这 个 函数 的 代码 是 你 自己 写 
的 ， 主 要 是 检测 cinput> 元 素 的 值 ， 然 后 调用 setCustomValidity() 方 法 。 
如 果 当 前 值 有 问题 ,那么 在 调用 setCustomvalidity() 方 法 时 就 需要 提供 一 条 错误 消息 。 和 否则 ， 
如 果 当 前 值 没有 问题 , 调用 setCustomvalidity() 方 法 时 只 要 传人 空 字符 串 即 可 ; 这 样 会 清除 以 前 
设置 过 的 自 定义 错误 消息 。 

要 强制 评论 (comment ) 框 中 至 少 有 20 个 字符 ， 可 以 这 样 写 validateComments() 函数 : 














function validateComments(input) { 
if (input.value.length < 20) { 
input.setCustomValidity("You need to comment in more detail."); 


} 


else { 
// 没 有 错误 。 清 除 任何 错误 消息 
input.setCustomValidity(""); 
} 
} 


图 4-7 展 示 了 违反 上 述 规则 并 提交 表单 的 结果 。 





图 4-7: 如 果 在 调用 setCustom 
Validity() 方 法 时 提供 了 错误 


PERSONAL INFORMATION 


* 6666666 













































































Age 

ee i 消息 ， 浏 览 器 会 将 该 消息 当做 
a 自己 内 置 的 消息 。 提交 表单 时 ， 

en you 和 “ EE S A 

了 就 会 看 到 弹出 的 警告 框 中 包含 
first know you Ss 

wanted to be a 自 定义 的 错误 消息 

Zoo-keeper?”™* 





You need to comment in more detail. 





























当然 , 对 于 验证 需要 长 字符 串 的 字段 , 使 用 正则 表达 式 可 能 更 简单 明了 。 而 尽管 正则 表达 式 
很 适合 验证 某 些 数据 类 型 ， 自 定义 验证 逻辑 却 适 用 于 任何 情况 ,无论 是 复杂 的 数学 计算 还 是 与 
Web 服 务 器 通信 。 





注意 ”网 页 访客 可 以 看 到 你 放 在 JavaScript 中 的 一 切 ， 这 里 没有 什么 加 密 算法 。 就 拿 前 面 示例 中 
的 折扣 码 来 说 ， 其 位 数 是 12 位 。 但 你 肯定 不 愿意 在 自 定义 验证 逻辑 中 透露 这 个 信息 ， 否 
则 无 疑 会 为 那些 想 要 伪造 折扣 码 的 人 提供 便利 。 对 于 这 种 情况 ， 还 是 把 验证 逻辑 放 在 服 
务 器 端 比较 好 。 
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4.4 浏览 器 对 Web 表单 和 验证 的 支持 


不 同 浏览 器 对 HTML5 表 单 的 支持 也 不 一 样 。 换 句 话 说， 有 的 浏览 器 支持 某 些 验证 功能 ， 而 
另 一 个 浏览 器 则 未 必 支 持 同 样 的 功能 。 表 4-2 列 出 了 支持 到 目前 为 止 介绍 的 所 有 验证 功能 的 浏览 
顺 及 它们 的 最 低 版 本 。 正 如 下 表 所 表明 的 那样 ， 有 两 个 令 人 头疼 的 支持 问题 : 旧版 的 下 浏览 絮 和 
运行 在 智能 手机 和 平板 电脑 上 的 移动 浏览 器 。 

表 4-2 支持 验证 功能 的 浏览 器 
IE Firefox Chrome Safari Opera Safari iOS Android 版 的 Chrome 
最 低 版 本 10 4 10 5” 10 3 28 
*Safari 不 支持 所 要 求 的 属性 。 


由 于 HTML5 验 证 不 能 取代 服务 絮 端 验证 ， 因 此 可 以 仅 将 其 看 做 一 种 增强 ; 在 这 种 情况 下 ， 
浏览 需 支 持 的 一 致 不 一 致 也 就 无 所 谓 了 。 此 时 ， 对 于 不 支持 这 些 验证 的 浏览 器 〈 如 IE9 )， 用 户 提 
交 的 数据 会 直接 发 送 给 服务 器 ， 然 后 服务 器 发 现 其 中 的 问题 ， 再 返回 带 错 误 消息 的 相同 页 面 。 

另 一 种 可 能 是 ,你 的 网 站 包含 一 些 复杂 的 表单 ， 有 些 到 底 该 怎么 填 也 不 太 明 确 ， 而 你 也 不 愿 
意 眼 睁 睁 看 着 大 量 IE 用 户 流失 。 此 时 , 有 两 个 选择 : 你 自己 编写 验证 功能 或 使 用 现成 的 JavaScript 
库 , 借助 外 脑 。 到 底 怎 么 办 ， 取 决 于 验证 任务 的 广度 和 复杂 性 。 









































4.4.1 用 Modernizr 检 测 支持 情况 


假如 你 的 表单 只 需 少 量 简单 的 验证 ， 你 可 以 自己 写 验证 代码 。 利 用 Modernizr (参见 1.6.3 节 ) 
可 以 检测 浏览 器 对 各 种 HTML5 表 单 验 证 功能 的 支持 情况 。 例 如 ， 使 用 Modernizr.input.pattern 
属性 可 以 检测 出 浏览 器 是 否 支 持 pattern 属 性 : 


if (!Modernizr.input.pattern) { 
// 浏 览 器 不 支持 正则 表达 式 验 证 ， 可 以 在 JavaScript 中 使 用 正则 表达 式 





注意 ”这 里 的 pattern 属 性 只 是 Modernizr.input 对 象 中 的 一 个 属性 。 其中， 用 于 检测 浏览 器 对 表 
单 验证 支持 情况 的 属性 还 有 : placeholder、autofocus、required、max、min 和 step。 


没 错 ， 这 个 例子 没有 告诉 你 什么 时 候 执 行 检测 ， 也 没有 告诉 你 该 如 何 反馈 。 假 如 你 想 模 仿 
HTML5 验 证 机 制 , 可 以 在 用 户 提交 表单 的 时 候 执 行 检测 。 为 此 , 需要 为 表单 的 onsubmit 事 件 定义 
处 理 函 数 ， 根 据 情 况 返 回 true〈 表 示 验 证 通过 ， 可 以 提交 表单 ) 或 false〈 表 示 验 证 未 通过 ， 浏 
览 锅 应 该 取消 提交 操作 ): 


<form id="zooKeeperForm" action="processApplication.cgi" 
onsubmit="return validateForm()"> 
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以 下 是 一 个 简单 的 示例 ， 演 示 了 针对 一 个 必 填 字段 的 自 定义 验证 代码 : 


function validateForm() { 
if (!Modernizr.input.required) { 
// 不 支持 required 属 性 ， 因 此 必须 自己 编写 代码 检测 





// 首 先 ， 取 得 包含 所 有 元 素 的 数组 


var inputElements = document.getElementById("zooKeeperForm").elements; 


// 接 着 ,人 遍历 数组 ,检测 每 个 元 素 
for(var i = 0; i < inputElements.length; i++) { 


// 检 测 当 前 元 素 是 否 必 填 

if (inputElements[i].hasAttribute("required")) { 
// 如 果 是 必须 填写 的 ， 则 检测 其 值 是 否 为 空 
// 如 果 为 空 ， 则 表单 验证 失败 ， 返 回 false 
if (inputElements[i].value == "") return false; 


} 


// 如 果 到 了 这 儿 ， 则 一 切 顺利 
// 浏 览 器 可 以 提交 表单 
return true; 


提示 “以 上 代码 运用 了 基本 的 JavaScript 技 术 ， 包 括 查找 元 素 、 循 环 和 条 件 逻 辑 。 有 关 JavaScript 
的 基本 知识 ， 请 参阅 附录 B。 


4.4.2 用 HTML5Forms 兼 容 


如 果 你 的 表单 很 复杂 ， 而 你 又 想 省 点 事 儿 ( 省 下 的 时 间 可 以 学 习 未 来 的 技术 )， 则 大 可 选择 
一 个 现成 的 JavaScript 库 。 从 技术 角度 讲 ， 无 论 是 自己 写 ， 还 是 使 用 JavaScript 库 都 没有 什么 不 一 
样 。 都 是 先 检 测 浏览 器 对 验证 功能 的 支持 情况 , 然后 再 在 必要 时 手工 验证 。 但 区 别 在 于 , JavaScript 
库 已 经 为 你 准备 好 了 所 有 代码 。 

访问 http:/tinyurl.com/polyfills ， 可 以 看 到 长 长 的 页 面 ， 里 面 列 出 了 大 量 JavaScript 库 。 其 中 一 
个 古老 但 好 用 的 HTMLSForms 库 ， 可 以 从 http:/Wtinyurl.com/htmlsforms 中 获取 。 要 下 载 一 份 , 点 击 
Download ZIP 按 钮 ， 会 获得 一 个 打包 了 所 有 文件 的 Zip 包 。 解 压 它 ， 会 得 到 一 堆 有 用 的 脚本 (在 
shared/js 文 件 夹 ) 和 一 长 串 示例 页 面 (在 tests/html5forms 文 件 夹 )。 

要 使 用 HTML5Forms 库 ， 需 要 把 shared 文 件 夹 ( 包括 所 有 子 文件 夹 ) 复制 到 你 网 站 所 在 的 文 
件 夹 中 。 你 可 以 给 它 重 命名 ( 比如 ,将 shared 改 名 为 html5forms )， 只 要 同时 修改 脚本 引用 里 的 名 
字 。 一旦 复制 了 这 些 文件 ， 需 要 在 网 页 中 添加 两 个 引用 ， 像 这 样 : 
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<head> 
<title>...</title> 
<script src="shared/js/modernizr.com/Modernizr-2.5.3.forms.js"></script> 
«script src="shared/js/html5Forms.js" data-webforms2-support="all" 
data-webforms2-force-js-validation="true"> 
</script> 

<head> 

第 一 个 引用 指向 了 一 个 包含 在 HIML5Forms 中 的 Modernizr 的 小 版 本 (这 里 ， 它 的 名 字 是 
Modernizr-2.5.3.forms.js )， 并 且 提 供 了 特性 检测 ， 以 确保 验证 模块 仅 在 浏览 器 需要 的 时 候 加 载 。 
如 果 已 经 在 使 用 Modemizr， 应 该 忽略 这 个 引用 ， 只 需 确 保 Modernizr 版 本 包含 了 表单 检测 模块 。 
这 些 是 在 Modernizr 下 载 页 面 “Non-core detects” 部 分 以 forms- (〈 比如 forms-validation ) 开头 的 
模块 。 

第 二 个 引用 指向 HTML5Forms 库 。 在 熟悉 的 src 属 性 后 面 ， 会 看 到 一 个 或 多 个 指定 所 需 功 能 
的 属性 。 在 上 面 的 例子 中 ， 脚 本 加 载 了 所 有 的 webforms 功 能 。HTML5Forms 是 一 个 模块 化 的 库 ， 
这 意味 着 可 以 选择 性 地 使 用 它 的 一 部 分 功能 。 这 种 策略 确保 了 页 面 不 会 费 神 加 载 不 需要 的 功能 。 
F 面 的 例子 中 选择 了 支持 基本 的 验证 ， 必 需 的 字段 和 占 位 符 : 

<script src="shared/js/html5Forms.js" 


data-webforms2-support="validation,placeholder" 
data-webforms2-force-js-validation="true"> 























提示 。 ”如果 想 要 一 个 不 同 的 功能 组 合 , 可 以 在 下 载 的 HTML5Forms 的 tests/html5forms 目 录 下 , 找 
一 个 对 应 的 示例 页 面 文件 。 


接 下 来 会 介绍 HTML5Forms 库 支持 得 非常 好 的 一 些 表 单 特性 ， 比 如 滑动 条 、 日 期 选择 器 和 选 
色 器 。 代 码 中 仍然 有 一 些 坑 和 少量 的 bug。 如 果 你 计划 使 用 这 些 新 控件 ， 用 之 前 最 好 在 旧 浏 览 需 
(比如 IE9 ) 上 测试 一 下 。 











几 个 特殊 的 输入 属性 
HTML5 还 定义 了 另外 几 个 不 用 于 验证 的 属性 , 而 是 用 于 在 编辑 表单 时 控制 浏览 器 的 行为 。 
这 些 属性 并 不 是 所 有 浏览 器 都 支持 。 因 此 ， 这 几 个 属性 目前 还 只 能 用 于 试验 。 

口 Spellcheck。 有 些 浏 览 器 可 以 帮 用 户 检 查 输入 的 拼写 是 否 正确 ,不 过 有 一 个 明显 的 问题 ， 
即 并 非 所 有 输入 都 是 单词 ,而 这 个 功能 只 允许 用 户 “ 胡 乱 ” 输 入 几 个 字母 ,将 spellcheck 
设置 为 false， 表 示 不 建议 浏览 器 对 字段 进行 拼写 检查 ; 设置 为 true， 表 示 建 议 拼 写 检 
查 。( 浏览 器 默认 的 拼写 检查 行为 也 不 一 样 ， 如 果 你 不 设置 spellcheck 必 性， 那么 这 个 
问题 就 会 出 现 。) 

口 Autocomplete。 有 些 浏览 器 为 了 节省 你 的 时 间 ， 会 在 你 向 字段 中 输入 信息 时 提供 最 近 
输入 的 值 供 你 选择 。 自 动 完成 功能 并 不 是 所 有 时 候 都 适用 的 ， 正 如 HTML5 规 范 中 指 
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出 的 , 有 些 信 息 属于 敏感 信息 (比如 , 核 攻 击 的 编码 ), 而 有 些 信息 只 是 临时 性 的 (如 
一 次 性 的 银行 登录 验证 码 )。 在 这 种 情况 下 ， 应 该 把 autocomplete 属 性 设置 为 off， 告 
诉 浏览 器 不 要 提供 自动 完成 的 建议 。 而 在 确实 需要 的 情况 下 ， 也 可 以 把 autocomplete 
设置 为 on。 

口 Autocorrect 和 autocapitalize。 这 两 个 属性 可 以 用 来 在 移动 设备 〈 即 记 ad 和 iPhone 中 的 

Safari ) 上 控制 自动 纠 错 和 自动 大 小 写 功 能 。 

口 Multiple。 很 久 以 来 ，Web 开 发 人 员 一 直通 过 为 <select> 元 素 添加 multiple 属 性 ， 达 到 
让 用 户 能 选择 多 个 列表 项 的 目的 。 但 现在 ， 可 以 为 某 些 类 型 的 <input> 元 素 添加 这 个 必 
性 ， 包 括 用 于 上 传 文件 的 位 le 类 型 和 email 类 型 (参见 4.4.1 节 )。 在 支持 的 浏览 器 中 ， 用 
户 可 以 选择 多 个 文件 一 块 上 传 ， 或 者 可 以 在 一 个 输入 框 中 贴 上 多 个 邮件 地 址 。 





4.5 新 的 输入 控件 


HTML 表 单 有 一 个 奇怪 的 做 法 ， 即 用 一 个 元 素 ( 含 含糊 糊 地 叫 <input> ) 创建 多 个 控件 : 复 选 
框 、 文 本 框 ， 以 及 按钮 。 此 时 ，type 属 性 就 成 为 地 地 道道 的 总 开关 ， 它 的 值 决定 了 <input> 元 素 
到 底 是 什么 控件 。 

如 果 浏 览 器 遇 到 了 不 认识 的 <input> 元 素 类 型 (type 属性 值 )， 它 就 将 其 作为 一 个 普通 的 文本 
框 来 处 理 。 换 名 话说 ， 以 下 3 个 元 素 在 浏览 器 中 都 会 生成 一 个 文本 框 : 

<input type= "text "> 


<input type="super-strange-wonky-input-type"> 
<input> 


HTML5 利 用 了 浏览 需 的 这 个 默认 处 理 方式 ， 为 cinput> 元 素 添加 了 新 的 类 型 ， 如 果 浏 览 需 不 
认识 这 些 类 型 ,仍然 会 将 其 当做 普通 的 文本 框 来 处 理 。 比 如 , 要 创建 一 个 用 于 输入 电子 邮件 地 址 
的 文本 框 ， 可 以 使 用 新 的 email 类 型 : 
































<label for="email">Email <em>*</em></label> 
<input id="email" type="email"><br> 


在 不 支持 email 类 型 的 浏览 右 ( 如 IE9 ) 中 打开 这 个 网 页 ,会 看 到 一 个 普通 文本 框 , 这 是 完全 
可 以 接受 的 。 但 支持 HTML5 表 单 的 浏览 器 会 更 聪明 一 点 ， 它 们 会 像 下 面 这 样 做 。 
口 提供 便于 编辑 的 辅助 。 例 如 ， 智 能 一 些 的 浏览 需 或 者 便捷 的 JavaScript 组 件 可 以 从 你 的 地 
址 短 中 取得 电子 邮件 地 址 ， 帮 你 十 到 电子 邮件 字段 中 。 
口 限制 可 能 出 现 的 错误 。 例 如 ,在 数值 文本 框 中 输入 的 字母 会 被 浏览 句 忽 略 ， 或 者 无 效 的 日 
期 会 被 拒绝 ( 当然 ,也 可 能 会 要 求 你 从 一 个 迷你 小 日 历 中 选择 日 期 ,这样 既 方便 又 可 靠 )。 
口 执行 验证 。 在 单 击 提交 按钮 时 ， 浏 览 器 可 以 执行 更 加 完善 的 检查 。 比 如 ， 智 能 一 些 的 浏 
览 器 会 发 现 电 子 邮 件 字段 中 明显 存在 错误 的 邮件 地 址 ， 从 而 拒绝 继续 提交 。 
HTML5 规 范 没有 就 上 述 第 一 点 作出 明确 规定 。 浏 览 右 开发 商 可 以 视 情况 自行 决定 如 何 显示 
和 编辑 不 同 的 数据 ， 而 不 同 的 浏览 器 也 可 以 有 自己 的 特色 功能 。 比 如 ,移动 设备 上 的 浏览 器 可 以 


























104 | 第 4 章 构建 更 好 的 Web 表单 








定制 虚拟 键盘 ， 显 示 或 隐藏 不 需要 的 键 ( 参见 图 4-8 )。 






































TE 本 TT 本 图 4-8， 在 移动 浏览 器 中 ， 要 填写 表单 可 
Telephone (tel) Telephone (tel) 没有 全 键盘 可 以 使 用 。 图 中 的 Pod 通 过 

















3 i 定制 虚拟 键盘 为 用 户 提供 了 方便 ， 根 据 
i | 要 输入 的 数据 类 型 一 电话 号 码 和 电子 
邮件 ， 会 分 别 显示 数字 键盘 ( 左 ) 和 带 


有 人 @ 按 键 及 小 空格 键 的 字母 键盘 ( 右 ) 




















Alsjlojrlslnljkl 





E800000E 
碳 硬 国 四 国王 














不 过 ,更 重要 的 还 是 预防 错误 和 检测 错误 的 功能 。 最 起 码 ， 支 持 HTML5 表 单 的 浏览 絮 在 发 
现 表单 中 包含 违反 数据 规则 的 数据 时 , 要 阻止 表单 提交 。 所 以 , 如 有 果 浏 览 絮 不 能 做 到 预防 错误 ( 即 
上 述 第 二 点 )， 那 它 必须 在 用 户 提 交 表单 时 验证 数据 ( 上述 第 三 点 )。 

然而 ， 目 前 并 非 所 有 浏览 器 都 达到 了 这 些 要求 。 有 的 文 持 新 控件 类 型 ， 也 提供 了 一 些 编辑 畏 
助 , 但 缺少 验证 功能 。 而 很 多 只 支持 其 中 部 分 新 控件 ， 且 不 同 浏览 器 支持 的 范围 又 不 一 样 。 移 动 
浏览 器 的 问题 最 多 ， 虽 然 它们 提供 编辑 辅助 功能 ， 但 却 不 会 对 数据 进行 验证 。 

表 4-3 列 出 了 新 的 控件 类 型 以 及 完全 文 持 它们 的 浏览 右 一 一 完全 支持 是 指 在 有 数据 违反 规则 
时 ， 浏 览 器 会 阻止 表单 提交 。 











表 4-3 ”支持 新 控件 的 浏览 





控件 类 型 IE Firefox Chrome Safari Opera 
email 10 4 10 多 10.6 
url 10 4 10 5 10.6 
search” n/a n/a n/a n/a n/a 
tel” n/a n/a n/a n/a n/a 
number 10 = 10 5 9 
range 10 23 6 $ 11 
date、month、 竺 二 10 11 
Week、time 

color = = 20 至 7 


* HTML5 规 范 没有 要 求 验证 这 种 类 型 的 数据 。 
** Opera 在 版 本 11 和 12 上 支持 了 颜色 控件 类 型 ， 但 在 更 新 的 版 本 中 移 除 了 这 项 支持 。 
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提示 “如 果 你 使 用 Modernizr, 可 以 检测 Modernizr.inputtypes 对 象 的 属性 来 确定 浏览 器 支持 的 控 
件 类 型 。 比 如 ， 如 果 Modernizr.inputtypes.Tange 返 回 tfue， 则 说 明 浏览 器 支持 Tange 类 型 
的 控件 。 


4.5.1 电子 邮件 地 址 


电子 邮件 地 址 使 用 email 类 型 。 一 般 来 说 ， 有 效 的 电子 邮件 地 址 是 一 个 字符 串 ( 当然， 有 些 
字符 是 不 允许 出 现 的 ),。 这 个 字符 串 中 必须 包含 @ 符 号 和 一 个 点 号 , 而 且 两 者 之 间 至 少 要 间隔 一 个 
字符 ， 点 号 后 面 至 少 也 要 有 两 个 字符 。 以 上 差不多 就 是 一 个 有 效 电子 邮件 地 址 的 验证 规则 了 。 可 
是 , 要 为 验证 电子 邮件 地 址 编写 代码 或 者 正则 表达 式 , 就 没有 这 么 简单 了 。 这 件 看 似 简单 的 任务 
难 倒 过 很 多 善意 的 开发 人 员 。 因 此 ， 最 好 还 是 找 一 个 支持 email 控 件 的 浏览 器 ， 让 它 自 动 帮 我 们 
检测 得 了 ( 参见 图 4-9 )。 

















CONTACT DETAILS 图 4-9， Firefox 拒 绝 接受 伪造 电子 
Name* dffsdf 邮件 地 址 由 pedi 
Telephone oog 00000 


rakesh s@emailspammers.com 







Email * 











Please enter an email address. 


























电子 邮件 控件 支持 multiple 属 性 , 添加 了 这 个 属性 后 就 可 以 在 同一 个 字段 里 输入 多 个 电子 邮 
件 地 址 。 不 过 ， 多 个 电子 邮件 地 址 之 间 只 有 逗号 分 隔 ， 看 起 来 仍然 像 一 个 字符 串 。 


注意 ， 再 提醒 一 次 ， 空 值 可 以 通过 验证 。 如 果 你 想 强制 用 户 必 须 输 入 有 效 的 电子 邮件 地 址 ， 就 
要 在 email 控 件 中 指定 required 属 性 (参见 4.3.1 节 )。 


4.5.2 网址 


网 址 使 用 ur1 类 型 。 说 到 网 址 是 由 什么 组 成 的 ， 可 能 会 引发 激烈 的 讨论 。 但 大 多 数 浏览 器 都 
会 对 验证 网 址 采用 粗略 的 算法 。 首 先 要 有 一 个 URL 前 级 (可 以 是 合法 的 ， 如 http:/; 也 可 以 是 编 
造 的 ， 如 bonk:// )， 然 后 可 以 是 空格 和 大 多 数 特殊 字符 ( 冒号 除外 )。 

有 些 浏览 器 也 会 在 网 址 控件 中 给 出 URL 建 议 , 这 些 建 议 项 一 般 是 从 浏览 器 最 近 的 历史 记录 中 
提取 的 。 
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4.5.3 ”搜索 框 


搜索 框 使 用 search 类 型 。 搜 索 框 中 通常 要 输入 关键 词 ， 用 于 执行 某 种 搜索 。 可 能 是 搜索 整个 
互联 网 ( 比如 使 用 谷歌 ， 如 图 4-1 所 示 )， 也 可 能 是 搜索 一 个 网 页 或 者 对 自己 的 某 些 信息 执行 定制 
搜索 。 无 论 如 何 ， 搜 索 框 的 样子 与 行为 都 与 常规 的 文本 框 没 有 太 大 区 别 。 

在 Safari 等 浏览 需 中 , 搜索 框 的 样式 可 能 会 稍 有 不 同一 一 两 端 都 是 圆 形 。 而 在 Safari 和 Chrome 
的 搜索 框 中 输入 关键 词 时 ， 一 个 X 图 标 就 会 立刻 出 现在 搜索 框 的 右 侧 ， 单 击 就 可 以 清除 搜索 框 。 
除了 这 些 细微 的 差别 之 外 ， 搜 索 框 与 文本 框 无 异 。 但 搜索 框 的 值 是 有 其 特定 语义 的 。 换 句 话说， 
使 用 搜索 框 可 以 让 浏览 器 及 辅助 ( 残障 人 士 ) 上 网 的 软件 知道 它 是 干什么 用 的 。 也 许 将 来 会 有 一 
天 ， 这 些 工 具 能 够 利用 搜索 框 把 访客 引导 到 正确 的 位 置 ， 或 者 为 用 户 提供 一 些 便 利 功 能 。 


















































4.5.4 电话 号 码 


电话 号 码 使 用 tel 类 型 。 电 话 号 码 有 很 多 种 模式 ， 有 的 只 包含 数字 ， 有 的 还 会 包含 空格 、 短 
横 线 、 加 号 和 圆 括 号 。 正 是 因为 存在 这 么 多 差异 ，HTML5 规 范 没有 要 求 浏览 器 验证 电话 号 码 。 
不 过 ， 谁 都 知道 电话 号 码 字 段 至 少 不 能 接受 字母 ( 当然 ，tel 控 件 确实 不 接受 字母 )。 

目前 ， 使 用 te1 类 型 控件 的 唯一 用 途 是 在 移动 浏览 器 中 定制 虚拟 键盘 ， 键 盘 中 只 包含 数字 ， 
没有 字母 。 
































4.5.5 数值 


HTML5 定 义 了 两 种 数值 类 型 的 控件 。 其 中 ，number 类 型 用 于 常规 数值 。 

使 用 number 类 型 的 控件 有 明显 的 好 人 处。 常规 文本 框 什么 值 都 可 以 接受 : 数值 、 字 母 、 空 格 、 
标点 符号 ， 以 及 一 些 专 门 的 卡通 的 字符 。 为 此 , 检测 输入 的 值 是 不 是 数值 以 及 是 不 是 在 某 个 范围 
内 就 成 了 非常 重要 的 任务 。 现 在 有 了 number 类 型 的 控件 ， 浏 览 器 就 可 以 自动 忽略 非 数 值 字 符 。 看 
一 个 例子 吧 : 


<label for="age">Age<em>*</em></label> 
<input id="age" type="number"><br> 


当然 , 数值 也 有 很 多 种 ,也 并 非 任 何 数 据 形式 都 可 以 接受 任意 数值 。 上 面 标记 中 所 示 的 年 龄 
(age ) 可 以 接受 43 000、-6 之 类 的 值 。 为 了 增加 限制 ， 需 要 配合 使 用 min 和 max 属 性 。 比 如 ， 下 面 
的 例子 就 把 可 接受 的 数值 限制 在 了 0 到 120 之 间 : 

<input id="age" type="number"” min="0" max="120"><br> 

一 般 来 说 ，number 控 件 只 接受 整数 , 不 接受 30.5 这 样 的 小 数 。( 实际 上 ，,， 有些 浏览 器 都 不 允许 
输入 小 数 点 。) 不 过 ,通过 设置 step 属 性 可 以 改变 这 一 点 ; step 属 性 表示 可 以 接受 的 数值 之 间 的 
间隔 。 例 如 ， 将 最 小 值 (min ) 设置 为 0， 将 间隔 值 (step ) 设置 为 0.1， 意 味 着 可 以 输入 0、0.1、 
0.2、0.3…… 然 而 ， 输 入 0.15 后 提交 表单 就 会 收 到 错误 消息 。 默 认 的 间 隅 值 为 1。 
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<label for="weight">Weight (in pounds)</label> 
<input id="weight" type="number" min="50" max="1000" 
step="0.1"value="160"><br> 


设置 step 属 性 也 会 影响 到 数值 框 的 微调 按钮 ， 如 图 4-10 所 示 。 














- 图 4-10: 很 多 浏览 器 都 会 在 数值 框 中 添加 微调 

weaghttn [m3 多 按钮 ,每 单 击 一 次 向 上 箭头 ,数值 都 会 增加 step 

ee 属性 指定 的 值 ( 除非 已 经 达到 允许 的 最 大 值 ) 。 
类 似 地 ， 每 单 击 一 次 向 下 箭头 ， 数 值 都 会 减少 
step 属 性 指定 的 值 
































4.5.6 ”滑动 条 


HTML5 的 另 一 个 数值 类 型 的 控件 是 range。 与 number 控 件 类 似 ， 它 也 可 以 表示 整数 或 者 小 数 
值 。 同 样 ，range 控 件 也 支持 与 number 控 件 相 同 的 属性 (min 和 max )， 用 于 设置 允许 的 范围 。 下 面 
是 一 个 例子 : 


<label for="weight">Weight (in pounds)</label> 
<input id="weight" type="range" min="50" max="1000" value="160"><br> 


两 者 的 区 别 是 range 控 件 用 滑动 条 的 形式 表示 信息 。 智 能 浏览 器 对 于 range 控 件 ， 会 显示 一 个 
如 图 4-11 所 示 的 滑动 条 ， 而 不 是 文本 框 。 

要 设置 range 控 件 的 值 ， 只 要 把 滑 块 拖 动 到 合 oe 也 就 是 把 滑 块 放 在 滑动 条 上 最 大 
值 和 最 小 值 之 间 的 某 个 地 方 。 支 持 range 控 件 的 浏览 器 不 会 告诉 你 最 终 设 定 了 多 大 的 值 。 如 果 你 
想 显 示 这 个 值 ， 可 以 使 用 JavaScript 响 应 滑动 条 0 ( 即 处 理 onChange 事 件 )， 然 后 在 旁边 
把 值 显示 出 来 。 当 然 ， 你 得 事先 检测 一 下 浏览 器 是 不 是 支持 range 控 件 (使 用 Modernizr 等 工具 )。 
如 果 浏 览 器 不 支持 range 控 件 ， 就 没有 必要 多 此 一 举 了 ， 因 为 结果 只 能 是 在 文本 框 中 输入 值 。 

























































































| 图 4-11: 这 个 range 控 件 与 我 们 熟悉 的 音量 调节 
0 0 = 器 很 像 ， 它 非常 才 合 在 最 小 值 和 最 大 值 局 
范围 适中 且 输 入 的 特定 值 并 不 重要 ( 但 该 值 接 





























近 最 小 值 还 是 最 大 值 重要 ) 的 情况 下 使 用 














4.5.7 “日 期 和 时 间 


了 几 个 与 日 期 有 关 的 新 控件 。 支 持 日 期 控件 的 浏览 器 会 提供 一 个 方便 的 下 拉 式 

， 供 用 户 选 择 。 这 样 ， 不仅 可 以 避免 对 日 期 格式 的 困惑 ， 也 可 以 避免 意外 (或 有 意 ) 输入 一 
0 日 期 。 智 能 的 浏览 絮 还 能 提供 更 多 便利 ， 比 如 与 个 人 日 历 集 成 。 

目前 来 看 ， 虽然 日 期 控 ss 但 支持 浏览 需 对 它 的 支持 还 不 好 。Chrome 和 Opera 是 仅 有 
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的 提供 下 拉 式 日 历 的 浏览 器 〈 如 图 4-12 所 示 )。 其 他 浏览 器 不 支持 日 期 数据 类 型 ，! 


的 、 不 可 验证 的 文本 输入 框 。 


显示 一 个 普通 














Date input types: Date input types: 

datetime-local: 06/25/2014 07:00 FM x 向 v datetime-local: | 国 /25/2014 07:00 PM x 片 

date: 01/01/2014 x 向 v dnbe; es 

time: 03:03 AMX 民 time: Sun Mon Tue Wed Thu Fri 

month: December, 1982 x 同 Y month 1 2 3 4 5 6 
8 9 10 11 12 13 

week: Week 04, 2014 Xv week: 15 16 17 18 19 20 
22 23 24 Be 26 27 
29 30 

Submit Submit 





图 4-12: date 和 time 控 件 
的 文本 框 ( 左 ) 有 些 不 
一 样 。 但 真正 方便 的 地 
方 在 于 ， 支 持 的 浏览 昌 
提供 了 下 拉 式 日 历 ， 让 
用 户 可 以 选择 适当 
期 ， 而 不 必 担 心 格式 
( 右 ) 


















































提示 | 


什么 早 


想 使 用 新 的 日 期 控件 ， 最 好 还 是 在 不 支持 的 浏览 
绍 的 HTML5Forms (4.4.2 节 ),。 
eo pe 


表 4-4 中 列 出 了 6 种 新 的 日 期 时 间 型 控件 。 


NA pe 
见 古 


中 使 用 JavaScript 库 ， 例 如 前 面 
毕竟 ， 在 不 支持 这 些 新 日 期 控件 的 浏览 器 中 ， 用 户 很 容 
是 很 麻烦 的 事 儿 。( 这 就 是 为 
就 有 了 自 定义 JavaScript 日 期 控件 ， 而 且 它 们 在 互联 网 上 随处 可 见 的 原因 。) 





表 4-4 “日 期 时 间 类 型 的 控件 
控件 类 型 说 明 示 例 
date 格式 为 YYYY-MM-DD 的 日 期 2014-01-25 表 示 2014 年 1 月 25 日 
time 


datetime-local 


datetime 


month 


week 


提示 支持 日 期 类 型 的 浏览 器 
日 期 格式 必须 正确 。 比 如 ， 


格式 为 HH:mm:ss.ss， 用 24 小 时 制 表 示 的 时 间 ， 秒 的 部 分 可 





格式 为 YYYY-MM-DDTHH:mm:ss， 
大 写 T 分 隔 


格式 为 YYYY-MM-DD HH:mm:ss-HH:mm， 包 含 日 期 和 时 间 ， 


还 有 一 个 时 区 偏 移 量 ， 与 3.1.1 匠 中 


包含 日 期 和 时 间 ， 中 间 








Pp 的 <time> 元 素 格式 相同 。 


[ 选 


以 


但 是 ，datetime 格 式 没有 被 任何 浏览 器 有 效 支 持 ， 并 且 将 来 
可 能 会 移 除 ， 所 以 请 使 用 datetime-local 代 赫 


格式 为 YYYY-MM， 表 示 年 月 


格式 为 YYYY-Www， 表 示 年 和 周 ， 
有 52 周 或 53 周 











根据 年 份 不 同 ， 


一 年 可 能 


<input type= "date”min="2014-01-01”max="2014-12-31">。 


14:35 或 14:35:50.2 表 示 下 午 
2:35 (50.2 秒 ) 
2014-01-25T14:35 表 示 2014 年 
月 25 日 下 午 2:35 
2014-01-15774:35-05:00 表 示 美 
国 纽约 〈 西 五 区 ) 时 间 2014 年 1 
月 15 日 下 午 2:35 


j= 








2014-01 表 示 2014 年 1 月 


2014-W02 表 示 2014 年 第 二 周 





也 支持 min 和 max 属 性 。 换 名 话说 ， 可 以 设置 最 小 和 最 大 日 期 ， 但 
要 限定 某 日 期 字段 中 必须 填写 2014 年 的 日 期 ， 可 以 这 样 写 
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4.5.8 颜色 


颜色 使 用 color 控 件 类 型 。 虽 然 用 处 不 大 ， 但 这 个 新 控件 很 有 意思 ， 可 以 让 用 户 从 下 拉 式 色 
盘 中 选取 颜色 ， 这 个 色 盘 就 像 在 桌面 绘图 程序 中 看 到 的 一 样 。 目 前 ，Chrome 是 唯一 提供 下 拉 色 
盘 的 浏览 器 。Oprea 在 版 本 10 和 版 本 11 中 曾经 短暂 地 支持 过 ， 但 是 在 认为 太 过 试验 性 后 就 移 除 了 
该 项 支持 。 

在 不 支持 color 类 型 的 的 浏览 器 中 ， 填 写 表单 的 用 户 需 要 靠 自 己 输入 一 个 十 六 进 制 的 颜色 码 
(或 者 可 以 使 用 4.4.2 节 介绍 的 HTML5Forms 库 )。 


4.6 ”新 元 素 


迄今 为 止 ， 我们 介绍 了 HTML5 对 表单 的 扩展 ,介绍 了 新 的 验证 功能 ， 也 介绍 了 通过 添加 新 
的 控件 让 表单 更 加 智能 。 这 些 新 功能 都 是 很 实用 的 , 也 得 到 了 广泛 支持 。 但 是 , 这 些 并 不 是 HIML5 
表单 的 全 部 。 

HTML5 也 新 增 了 一 些 全 新 的 元 素 ， 用 于 弥补 缺漏 和 增加 功能 。 有 了 这 些 新 元 素 ， 就 可 以 在 
网 页 中 添加 下 拉 建 议 项 、 进 度 条 、 工 具 栏 等 。 这些 新 元 素 的 问题 在 于 ,旧版 本 的 浏览 器 肯定 不 文 
持 它 们 ， 而 鉴于 HTML5 规 范本 身 还 在 制定 之 中 ， 新 浏览 絮 也 没有 急 着 支持 它们 。 因 此 ， 本 章 只 
介绍 那些 已 经 得 到 支持 的 功能 。 不 少 读者 好 奇 能 用 这 些 元 素 干 什么 , 但 是 却 不 能 现在 就 把 它们 派 
上 用 场 ， 除 非 你 对 对 付 浏览 器 怪癖 和 不 兼容 性 上 瘾 。 































































































4.6.1 使 用 <datalist> 显 示 输 入 建议 


新 的 <datalist> 元 素 可 以 让 你 在 普通 文本 框 中 添加 一 个 下 拉 建 议 列表 。 这 样 ， 填 表 的 人 既 可 
以 直接 从 列表 中 选择 输入 ， 也 可 以 自由 输入 (参见 图 4-13 )。 
























































| Ee 时 到 | 图 4-13: 输入 的 同时 , 浏览 器 会 显示 出 

| D zookerper Form 一- 二 | 匹配 的 建议 项 。 例 如 , 输入 字母 “ca”， 

| €) 口 file///C/HTMLS/Chapter 04/Datalist,html -| 已 || 合 | 四: | 浏览 器 就 会 显示 名 字 中 包含 这 两 个 字 
| ( 不 一 定 在 开始 位 置 ) 的 动物 

















Zoo Keeper Application Form 


Please complete the form. Mandatory fields are marked with a * 


WHAT'S YOUR FAVORITE ANIMAL? 


[ca 


Alpaca 
门 Cat 
| Caribou 
_| Caterpillar 
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<datalist> 必 须 配 合 一 个 标准 的 文本 框 使 用 。 假 设 我 们 有 以 下 <input> 元 素 : 


<legend>What's Your Favorite Animal?</legend> 
<input id="favoriteAnimal"> 





要 为 这 个 文本 框 添加 建议 项 列表 ， 必 须 先 创建 一 个 cdatalist>。 从 技术 角度 讲 ， 可 以 在 任何 
地 方 定 义 这 个 列表 ， 因 为 <datalist> 不 会 显示 出 来 ， 而 只 会 为 使 用 它 的 文本 框 提供 数据 。 话 虽 这 
么 说 ， 还 是 把 这 个 <datalist> 放 在 使 用 它 的 <input> 元 素 之 后 (或 之 前 ) 更 合适 。 下 面 就 是 一 个 





<datalist> 元 素 的 示例 : 


<datalist id="animalChoices"> 
<option label="Alpaca" value="alpaca"> 
<option label="Zebra" value="zebra"> 
<option label="Cat" value="cat"> 
<option label="Caribou" value="caribou"> 
<option label="Caterpillar" value="caterpillar"> 
<option label="Anaconda" value="anaconda"> 
<option label="Human" value="human"> 
<option label="Elephant" value="elephant"> 
<option label="Wildebeest" value="wildebeest"> 
<option label="Pigeon" value="pigeon"> 
<option label="Crab" value="crab"> 

</datalist> 








与 原来 的 <select> 元 素 一 样 , <datalist> 也 使 用 <option> 定 义 数 据 项 。 每 个 coption> 表 示 一 个 
可 供 选 择 的 建议 ， 其 1abel 属 性 是 显示 在 文本 框 中 的 内 容 ， 而 value 属 性 是 最 终 会 发 送 给 服务 器 的 
值 (如 果 用 户 选 择 了 该 项 )。 就 其 本 身 而 言 ，<datalist> 是 完全 不 可 见 的 。 为 了 将 它 与 文本 框 联 


























系 起 来 以 便 提供 建议 ， 下 一 步 就 需要 将 <input> 元 素 的 list 属 性 设 定 为 cdatalist> 的 ID : 


<input id="favoriteAnimal" list="animalChoices"> 





当前 版 本 的 Chrome、IE、Firefox 和 Oprea 支 持 <datalist>。 它们 会 显示 如 图 4-13 所 示 的 可 能 匹 
配 列表 。 但 是 Safari、 旧 版 的 下 (IE9 及 其 更 早 版 本 ) 以 及 移动 浏览 器 会 忽略 1ist 属 性 和 <datalist> 








元 素 ， 所 有 建议 项 也 就 白 定义 了 。 


但 也 不 尽 然 , 我 告诉 大 家 一 个 不 错 的 后 备 技巧 , 可 以 让 其 他 浏览 器 也 能 利用 这 些 数据 。 技 巧 
就 是 在 cdatalist> 中 再 添加 男 一 个 元 素 。 这 个 技巧 之 所 以 可 行 ， 是 因为 支持 cdatalist> 的 浏览 带 








只 会 关注 其 中 的 <option> 元 素 , 而 会 忽略 其 他 内 容 。 下面 这 个 修改 后 的 例子 就 利用 了 这 一 


持 <datalist> 的 浏览 器 会 忽略 其 中 的 粗 体 标记 。 ) 


<legend>What's YouT Favorite Animal?</legend> 
<datalist id="animalChoices"> 
<span class="Label">Pick an option:</span> 
<select id="favoriteAnimalPreset"> 
<option label="Alpaca" value="alpaca"> 
<option label="Zebra" value="zebra"> 
<option label="Cat" value="cat"> 
<option label="Caribou" value="caribou"> 
<option label="Caterpillar" value="caterpillar"> 
<option label="Anaconda" value="anaconda"> 


点 。( 文 
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<option label="Human" value="human"> 
<option label="Elephant" value="elephant"> 
<option label="Wildebeest" value="wildebeest"> 
<option label="Pigeon" value="pigeon"> 
<option label="Crab" value="crab"> 
</select> 
<br> 
<span class="Label">0r type it in:</span> 
</datalist> 
<input list="animalChoices" name="list"> 


删除 上 面 的 粗 体 标 记 ， 结 果 与 前 面 的 例子 完全 一 样 。 而 这 样 一 来 ， 支 持 <datalist> 的 浏览 
仍然 只 会 显示 一 个 文本 框 和 一 个 下 拉 建 议 项 列表 (与 图 4-13 显 示 的 一 样 )。 而 在 其 他 浏览 需 中 ， 
新 添加 的 标记 会 把 cdatalist> 的 那些 建议 项 组 织 成 一 个 选择 列表 ， 并 人 允许 用 户 选 择 、 输 入 (如 图 
4-14 所 示 )。 

这 种 过 渡 完 全 没有 痕迹 。 只 不 过 在 服务 器 端 接收 到 表单 数据 后 ,需要 判断 数据 是 来 自选 择 列 
表 ( 即 这 里 的 favoriteAnimalPreset ) 还 是 来 自 文本 框 ( 即 favoriteAnimal )。 虽 然 会 多 费 这 一 点 点 周 
折 ， 但 毕竟 为 用 户 提供 了 很 大 的 方便 ， 没 有 抛弃 任何 人 。 








注意 ”最 初 引 入 <datalist> 元 素 的 时 候 ， 还 为 它 设 计 了 一 个 从 其 他 地 方 (如 Web 服 务 器 ， 然 后 可 
能 再 访问 数据 库 ) 取得 数据 的 功能 。 在 HTML 标准 未 来 的 版 本 中 ， 可 能 还 会 正式 增加 这 
项 功能 。 不 过 现在 要 想 实现 这 项 功能 ， 疏 怕 还 只 能 自己 写 JavaScript 代 码 ， 利 用 
XMLHttpRequest 对 象 ( 参见 11.1.1 节 ) 来 获得 数据 。 























le 图 4-14: 在 不 支持 cdatalist> 的 浏览 
外 至 | C\HTMLS\Chapter 04\Datalist,html DCGdX | ni Ye 0 器 中 也 可 以 使 用 建议 项 ， 但 需要 把 建 
S Zookeeper Form x b | 议 项 者 装 在 一 个 <select> 列 表 中 








Zoo Keeper Application Form 


Please complete the form. Mandatory fields are marked with a * 


WHAT'S YOUR FAVORITE ANIMAL? 


Pick an option: |Alpaca [z| 


Or type it in: | 


Submit Application 











和 100% 

















112 | 第 4 章 构建 更 好 的 Web 表单 








4.6.2 ”进度 条 和 计量 条 
另外 两 个 新 图 形 微 件 是 <progress> 和 <meter>, 这 两 个 元 素 外 观 相 似 , 作用 不 同 ( 参见 图 4-15 )。 

















ET (EES ”els 全 | 图 4-15: 在 支持 的 浏览 有 
图 progress and Meter VE | 口 progressand Meter [+| 和 
CG Q progressAndMeterhtml » [UE ProgressAndMeter htm -|@ emilee 中 ， <meter> 与 <progress> 
> 能 够 提供 形象 的 度量 
Progress Bars Progress Bars ( 左 ) 。 而 在 其 他 浏览 曙 
Current progress: al Current progress: 50% 中 ， 则 会 显示 你 设 定 的 后 


Current Progress: 





Current progress: Task in progress... 


Du 
备 内 容 ( 右 ) 
Meters Meters 
Your suitcase weighs: MI || | | Your suitcase weighs: 28 pounds 
Your suitcase Weighs: 六 | Your suitcase weighs: 79 pounds* 


“A surcharge applies to suitcases heavier than 70 pounds. * A surcharge applies to suitcases heavier than 70 pounds. 


Our goal is to raise $50,000 for SLF (Save the Our goal is to raise $50,000 for SLF (Save the 
Lemmings Foundation). 
So far we've raised $14,000. om 


Lemmings Foundation). 
So far we've raised $14,000. 



































其 中 ,<progress> 表 示 任 务 的 进度 ， 背 景 为 灰色 ， 完 成 的 部 分 填充 为 脉动 式 绿色 条 。 说 起 这 
个 形象 , 大 家 可 能 都 很 熟悉 ，Windows 操 作 系 统 中 复制 文件 时 就 会 出 现 这 种 进度 条 。 不 过 ， 用 户 
查看 网 页 的 浏览 器 不 同 ， 进 度 条 的 样子 也 可 能 不 同 。 

而 <meter> 元 素 表 示 的 是 位 于 已 知 范围 内 的 一 个 值 。 和 看 一 看 ，<meter> 与 <progress> 的 外 观 相 
同 , 但 实际 上 绿色 条 阴影 更 深 一 些 , 而 且 没 有 脉动 效果 。 根 据 浏 览 器 不 同 , 计量 条 的 颜色 可 能 会 
在 值 “ 过 低 ” 或 “过 高 ”的 时 候 改变 。 比 如 ， 图 中 后 一 种 情况 下 ，Chrome 把 绿 条 变 成 了 黄 条 。 
但 cmeter> 与 <progress> 最 大 的 不 同 ， 还 是 标记 要 表达 的 语义 。 








注意 ”严格 来 讲 ， 新 的 <meter> 与 <progress》 元 素 并 非 必须 出 现在 表单 中 。 实 际 上 ， 它 们 其 至 都 
不 是 真正 的 控件 ( 因为 它们 不 能 从 网 页 访客 那里 收集 信息 )。 可 是 ， 官 方 的 HTML5 规 范 
把 它们 归 为 一 类 ， 也 是 考虑 cmeter> 与 <progress> 元 素 给 人 的 感觉 像 是 控件 (以 图 形 的 方 
式 显 示 数 据 )。 





所 有 主流 浏览 器 的 最 新 版 本 支持 cmeter> 与 <progress> 元 素 。 但 是 ， 在 旧版 的 万 (IE9 及 其 更 
早 版 本 ) 和 一 些 移动 浏览 器 上 会 有 麻烦 ,为 确保 对 所 有 浏览 器 都 支持 ,需要 用 一 些 像 HTML5Forms 
(4.4.2 节 ) 之 类 的 东西 来 兼容 这 个 功能 。 

使 用 cmeter> 与 <progress> 很 简单 。 先 来 看 看 <progress>， 它 有 一 个 value 属 性 ， 用 于 设置 表 
示 进 度 的 百分比 ( 即 填充 的 绿色 条 的 宽度 )， 值 其 实 是 0 到 1 之 间 的 小 数 。 比 如 ， 可 以 用 0.25 来 表 
示 完 成 了 进度 的 25%: 


<progress value="0.25"></progress> 
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另外 ， 也 可 以 利用 max 属 性 设置 最 大 值 ， 改 变 进 度 条 的 比例 。 例 如 ，max 设 为 200， 那 么 value 
就 要 位 于 0 和 200 之 间 。 如 果 把 value 设 为 30， 那么 结果 就 和 前 面 例子 中 将 value 设 置 为 0.25(〈25%6 ) 
一 样 : 

<progress value="50" max="200"></progress> 


这 个 比例 其 实 就 是 为 了 让 人 看 着 方便 。 而 浏览 网 页 的 人 也 不 会 看 到 进度 条 中 实际 的 值 。 





注意 ”实际 上 , <progress2 元 素 只 是 一 种 显示 立体 进度 条 的 便捷 方式 , 这 个 元 素 本 身 什 么 也 不 会 
做 。 比 如 ， 要 是 想 利 用 进度 条 来 显示 后 台 任 务 ( 比如 ,使 用 13.2 节 中 的 Web Worker ) 的 进 
度 ， 那 么 你 必须 自己 编写 JavaScript 代 码 取得 <progress> 元 素 并 实时 更 新 它 的 值 。 


不 支持 <progress> 元 素 的 浏览 器 会 名 略 它 。 作 为 后 备 , 可 以 在 这 个 元 素 内 部 放置 进度 值 , 如 : 
<progress value="0.25">25%</progress> 


记 住 ， 在 支持 cprogress> 元 素 的 浏览 器 中 ， 是 不 会 显示 这 个 后 备 内 容 的 。 

除了 实际 显示 进度 的 进度 条 , 还 有 另外 一 种 进度 条 不 确定 进度 条 。 不 确定 进度 条 表示 反 
正 有 后 台 任 务 , 但 到 底 什 么 时 候 完成 不 知道 ( 可 以 想象 那些 永远 也 不 停 转 的 GIF 图 )。 不 确定 进度 
条 也 是 灰色 背景 ， 但 不 断 会 有 绿色 闪 过 ， 从 左 到 右 。 要 创建 不 确定 进度 条 ， 只 要 不 设置 value 值 
即 可 : 

<progress>Task in progress ...</progress> 


<meter> 元 素 大 致 也 一 样 ， 只 不 过 它 表示 的 是 某 种 计量 ,因此 也 被 称 为 计量 器 。 一 般 来 说 ， 
给 <meter> 元 素 设置 的 值 都 会 对 应 现实 中 的 某 个 值 ( 比如 , 钱 数 、 天 数 或 重量 )。 为 了 控制 cmeter> 

元 素 显示 这 些 数据 的 广 式 ， 需 要 设置 一 个 最 大 值 和 一 个 最 小 值 (使 用 max 和 min 属 性 ): 

Your suitcase weighs: <meter min="5" max="70" value="28">28 pounds</meter> 

同样 ， 位 于 <meter> 元 素 开始 与 结束 标记 之 间 的 内 容 ， 只 会 在 不 支持 该 元 素 的 浏览 器 中 显示 。 
当然 ， 有 时 候 把 <meter> 元 素 的 值 显示 出 来 也 是 必要 的 。 此 时 ， 你 得 自己 把 这 个 值 添加 到 页 面 中 ， 
不 要 依赖 提供 后 备 内 容 的 方式 。 下 面 的 代码 展示 了 相应 的 做 法 ， 即 先 显示 出 所 有 信息 ， 然 后 再 添 
加 一 个 可 选 的 <meter> 元 素 〈 只 有 支持 它 的 浏览 器 才 会 显示 ): 


<p>OuT goal is to raise $50,000 for SLF (Save the Lemmings Foundation).</p> 
<p>So far we've raised $14,000. <meter max="50000" value="14000"></meter> 


为 了 让 <meter> 元 素 能 够 表示 那些 “过 高 ”或 “过 低 ” 的 值 ， 而 且 还 能 表示 得 恰如其分 ， 就 
需要 用 到 low 和 high 属 性 。 大 于 high ( 但 小 于 max ) 的 值 ， 就 说 明 超过 了 它 应 有 的 大 小 了 ， 但 仍然 
是 可 以 接受 的 。 类 似 地 ， 小 于 low ( 但 大 于 min ) 的 值 就 是 过 低 了 : 


Your suitcase weighs: 

<meter min="5" max="100" high="70" value="79">79 pounds</meter>* 
<p><small>* A surcharge applies to suitcases heavier than 70 pounds. 
</small></p> 


有 些 浏览 器 可 能 不 会 利用 这 些 信 息 。 比 如 ，Chrome 对 于 过 高 的 值 会 显示 黄 条 (参见 图 4-15 )， 
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但 对 于 过 低 的 值 则 没有 任何 变化 。 最 后 ， 还 可 以 使 用 optimum 属 性 将 某 个 值 标记 为 理想 的 值 ， 但 
这 个 属性 不 会 影响 计量 器 在 当前 浏览 器 中 的 显示 结果 。 
总 之 ， 只 要 浏览 器 支持 ，<progress> 和 <meter> 就 可 以 为 用 户 带 来 一 些 便 利 。 

















4.6.3 ”使 用 <command> 和 <menu> 创 建 工 具 条 和 菜单 


这 个 功能 也 许 是 所 有 未 实现 功能 中 最 有 用 的 。 设 计 思 路 就 是 通过 一 个 元 素 (<command> ) 来 
表示 用 户 可 以 执行 的 操作 ， 而 用 男 一 个 元 素 (<menu> ) 来 封装 这 组 操作 。 灵 活 组 织 这 两 个 元 素 并 
为 它们 设置 适当 的 样式 ， 可 以 利用 <menu> 把 Mac 桌 面 下 方 的 可 停靠 工具 条 搬 到 浏览 器 窗口 中 来 ， 
so 可 是 , 现在 还 没有 浏览 器 支持 这 两 个 元 素 ， 所 以 要 

道 它 们 会 不 会 带 来 我 们 想象 的 效果 ， 只 能 拭目以待 。 


4.7 网 页 中 的 HTML 编辑 器 


第 1 章 我 们 就 讨论 过 ，HTML5 奉 行 “修补 牛 蹄 子路 ”的 原则 。 意 思 就 是 说 ， 把 今天 开发 人 员 
使 用 的 未 标准 化 的 功能 ， 正 式 写 和 人 HTML5 标 准 。 这 方面 的 个 例 3 就 是 标准 化 了 两 个 奇怪 的 属 
性 : contenteditable 和 designMode。 这 两 个 属性 的 作用 是 将 浏览 器 转换 成 简单 的 HTML 编 辑 右 。 

这 两 个 属性 早 就 已 经 有 了 。 事 实 上 ， 它 们 是 在 原先 正 一 统 天 下 的 时 候 ， 由 IE5 率 先 引 入 的 。 
随 着 越 来 越 多 Windows 扩 展 的 出 现 ， 大 多 开发 人 员 都 不 再 使 用 这 两 个 属性 了 。 但 随 着 时 间 推 移 ， 
其 他 浏览 器 也 陆续 支持 了 IE 实用 但 又 怪异 的 富 HTML 编辑 功 能 。 今 天 ， 所 有 桌面 浏览 器 都 支持 这 
两 个 从 未 写 进 任何 标准 的 属性 。 












































































































































何 时 使 用 HTML 编 辑 功能 

尝试 窜 HTML 编 辑 功 能 之 前 ， 有 必要 先 杭 清 楚 这 个 功能 到 底 有 什么 用 。 除 了 能 带 来 新 奇 
感 之 外 ， 能 编辑 HTML 实 际 上 对 任何 人 都 没有 什么 吸引 力 。 除 非 你 需要 向 用 户 提供 一 种 简单 快 
比如 让 用 户 能 添加 博客 文章 、 输 入 评论 、 发 布 分 类 广告 或 者 编写 

给 其 他 用 户 的 消息 

要 这 种 功能 能 ，contenteditable 和 designMode 属 性 也 未 必 是 第 一 选择 。 因 为 它 

们 不 能 提供 真正 的 网 页 设计 工具 所 具备 的 那些 好 用 的 功能 ， 比 如 修改 标记 、 查 看 和 编辑 HTML 
源 代码 、 拼 写 检查 ， 等 等 。 使 用 HTML 的 编辑 功能 ， 确 实 可 以 构建 更 好 用 的 编辑 器 ， 但 需要 做 
一 些 额外 的 工作 。 可 是 ,如 果 你 真 需要 富 文 本 编辑 功能 ， 息 怕 还 是 选择 别人 已 经 做 好 的 编辑 器 
更 方便 ,只 要 把 相应 代码 插入 网 页 中 即 可 。 流行 的 富 文本 编辑 器 有 TinyMCE ( wwwi.tinymce.com ) 
和 CKEditor ( http://ckeditor.com )。 


4.7.1 ”使 用 contenteditable 编 辑 元 素 
下 面 要 介绍 的 第 一 个 能 帮 我 们 实现 HTML 编 辑 功 能 的 属性 是 contenteditable。 把 这 个 属性 添 
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加 到 任何 元 素 并 且 设 置 它 的 值 为 true 以 使 该 元 素 的 内 容 可 以 编辑 : 


<div id="editableElement" contenteditable="true">You can edit this text, if 
you'd like.</div> 


乍 一 看 ， 可 能 还 看 不 出 有 什么 不 同 。 但 加 载 完 网 页 后 再 单 击 这 个 <div> 元 素 的 内 容 ， 你 就 会 
发 现 文本 编辑 光标 ( 插入 光标 )， 如 图 4-16 所 示 。 



















































































, | | 本 图 4-16: 单 击 可 编辑 
eA | : | 全 ElementEditinghtn P - >X| MM co : | 全 ElementEditinghtn P ~ 这 X| T 区 域 后 ,就 可 以 通过 
| 他 Element Editing | | S Element Editing 键盘 下 的 前 后 左 右 

Editable <div> Below: Editable <div> Below: 键 移动 光标 , 可 以 删 
除 文本 , 也 可 以 插入 

You can edittttt|this text, if you'd like. 和 En Ee this text, if you'd like. 内 容 ( 左 ) 。 还 可 以 
人 按 Shift 键 选择 并 复 

制 、 剪 切 、 粘 贴 文本 


( 右 ) 。 很 像 在 Word 
中 编辑 文本 , 只 是 不 
能 超过 <div> 的 界限 
































在 这 个 例子 中 ， 可 编辑 的 <div> 中 只 包含 文本 ， 但 其 实 可 以 把 任何 元 素 放 人 其 中 。 就 算是 把 
整个 页 面 放 到 里 面 ， 让 用 户 可 以 编辑 整个 页 面 也 没有 问题 。 类 似 地 ， 要 想 让 页 面 中 几 个 不 同 部 分 
可 以 编辑 ， 只 要 为 相应 元 素 应 用 contenteditable 属 性 即 可 。 











提示 “有 些 浏览 器 支持 少量 的 内 置 命 令 。 比 如 ， 在 ]EE 中 使 用 快捷 键 CtrlHB、CtrlHI 和 Ctrl+U 可 以 
为 文本 加 粗 、 加 斜体 和 加 下 划 线 。 类 似 地 ， 在 Firefox 中 ， 按 Ctrl+Z 可 以 撤销 上 一 次 操作 。 
而 在 Chrome 中 可 以 使 用 前 述 所 有 命令 。 要 想 进 一 步 了 解 这 些 编 辑 命令 ， 以 及 如 何 创 建 可 
以 触发 它们 的 自 定义 工具 条 ， 请 参考 Opera 的 两 篇 文章 : http://tinyurl.com/htmlEditl 和 
http://tinyurl.com/htmlEdit2 。 



































通常 ， 我 们 都 不 会 在 标记 中 设置 contenteditable 属 性 ， 要 设置 也 是 通过 JavaScript， 并 且 在 
编辑 完成 后 再 取消 可 编辑 的 功能 。 下 面 这 两 个 函数 就 是 用 来 开启 和 关闭 编辑 功能 的 。 
function startEdit() { 

// 让 元 素 可 以 编辑 

var element = document.getElementById("editableElement"); 
element.contentEditable = true; 


} 


function stopEdit() { 
// 把 元 素 修 改 为 正常 状态 
var element = document.getElementById("editableElement"); 
element.contentEditable = false; 
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// 在 消息 框 中 显示 标记 
alert("Your edited content: "+ element.innerHTML); 


} 
以 下 两 个 按钮 用 于 触发 它们 : 


<button onclick="startEdit()">Start Editing</button> 
<button onclick="stopEdit()">Stop Editing</button> 


不 要 把 这 两 个 按钮 放 到 网 页 的 可 编辑 区 域 中 ! 因为 网 页 一 变 得 可 以 编辑 , 其 中 的 元 素 就 不 会 
产生 事件 ， 因 而 就 无 法 再 触发 JavaScript 代 码 了 。 
图 4-17 展 示 了 元 素 变 成 可 编辑 之 后 和 为 其 中 内 容 应 用 一 些 样式 后 的 结果 ( 拜 Ctl+B 命 令 所 赐 )。 
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注意 ”不同 浏览 器 中 的 富 HTML 编 辑 功 能 也 会 有 一 点 差异 。 例 如 ， 在 Chrome 中 按 Ctrl+B 会 为 元 
素 添加 <b> 标 签 ， 而 在 ] 中 则 会 添加 <strong> 标 签 。 而 在 按 回 车 键 换 行 和 按 退 格 键 删除 标 
签 时 ， 也 会 出 现 差 异 。 说 到 这 ， 就 不 难 理解 HTML5 标 准 化 富 HTML 功能 的 的 意义 了 ， 至 
少 可 以 让 不 同 浏览 器 的 行为 一 致 。 




















Er 蕊 所 寿司 | 图 4-17: 这 个 图 证 明了 编辑 元 素 的 确 可 以 改变 页 面 在 内 

[< CBemenedingnm x | ” 存 中 的 信息 。 在 这 个 例子 中 , 新 内 容 显 示 在 了 弹出 框 里 。 
昌 在 实际 应 用 中 ， 这 些 数据 会 被 发 送 给 Web 服 务 器 ， 或 

许 还 会 用 到 11.1.1 节 介绍 的 XMLHttpRequest 对 象 
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Editable <div> Below: 


| You can edit this text, if you'd fike. 
YES!! I would like. 


[Start Editing [Stop Editing 
| @ Javascript Alert [| 


Your edited content You can edit this text, if you'd 
like.<br>&nbsp; &inbsp;<b> YES!</b> I would like. 



































4.7.2 ”使 用 designMode 编 辑 页 面 


与 contenteditable 属 性 类 似 ， 但 designMode 属 性 能 够 让 用 户 编辑 整个 页 面 。 你 也 许 会 问 : 
如 果 证 整个 页 面 都 可 以 编辑 ， 那 么 用 户 还 怎么 单 击 按钮 ， 我 们 还 怎么 控制 编辑 过 程 呢 ? 当然 有 
办 法 ， 那 就 是 把 要 编辑 的 文档 放 在 一 个 <iframe> 元 素 中 ， 而 这 个 元 素 就 充当 了 一 个 超级 的 编辑 
框 ( 见 图 4-18 )。 





















































47 网 页 中 的 HTML 编辑 器 | 117 











bmw 国 写本 三 宁 | 图 4-18: 这 个 页 面 中 包含 两 个 框 ， 第 一 个 是 


Fie /EJ HTMLS /Chapter OA/ pageEditna tinn -el 合 @- | 《iframe>， 其 中 显示 着 第 2 章 的 启示 录 页 
i | 面 。 第 二 个 是 普通 的 <div>， 其 中 显示 编辑 

后 的 启示 录 页 面 的 HTML 标 记 。 页 面 中 的 两 
个 按钮 控制 着 显示 ， 用 于 将 <iframe> 切 换 
为 设计 模式 


叶 




















than it's been for the average human being throughout all of 
recorded history. 











But don't get tco 
smug. There's stil] 
plenty of horrific 
ways it could all fall 
apart. In this article, 
you'll learn about a 
few of our favorites. 


Ew 


Mayan Doomsday 





Skentirs snaaest that 


| StartEditing | | Stop Editing 


Edited HTML 

Farticle> <header> <hgroup> <hl>How the World Could End</hl> <h2>Scenarios that “| 
spell the end of life as we know</h2> </hgroup> <p dlass="Byline">by Ray N. | 
|Carnation</p> </header> <div class="Content"> <p><span class="LeadIn">Right 
Inow</span>, you're probably feeling pretty good. After all, life in the developed world 上 | 
lis comfortable<span class="stylel">—</span>probably more comfortable than it's 

[been for the average human being throughout all of recorded history.</p> <figure 
|class="FloatFigure"> <img src="human_skulljpg" alt="Human skull> 

<figcaption>Will you be the last person standing if one of these apocalyptic scenarios 
Iplays out?</figcaption> </figure> <p>But don't get too smug. There's still plenty of 
lhorrific ways it could all fall apart. In this article, you'll learn about a few of our 
lfavorites.</p> <h2>Mayan Doomsday</h2> <p>Skeptics suggest that tha Mayan 





























这 个 页 面 的 标记 十 分 简单 。 以 下 就 是 这 个 页 面 <cbody> 元 素 中 的 所 有 内 容 : 


<h1>Editable Page</h1> 
<iframe id="pageEditor" src="ApocalypsePage Revised.html"></iframe> 
<div> 
<button onclick="startEdit()">Start Editing</button> 
<button onclick="stopEdit()">Stop Editing</button> 
</div> 


<h1>Edited HTML</h1> 
<div id="editedHTML"></div> 


显然 , 这 个 例子 有 赖 于 startEdit() 和 stopEdit() 方 法 , 这 两 个 方法 与 前 面 的 示例 类 似 。 只 不 
过 这 里 的 代码 修改 的 是 designMode 属 性 ， 而 非 contenteditable 属 性 : 


function startEdit() { 
// 把 <iframe> 转 换 为 设计 模式 
var editor = document.getElementById("pageEditor"); 


editor.contentWindow.document.designMode = “on ; 


} 


function stopEdit() { 
// 关 闭 <iframe> 的 设计 模式 
var editor = document.getElementById("pageEditor"); 
editor.contentWindow.document.designMode = "off"; 
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// 显 示 编 码 后 的 HTML ( 仅 为 验证 确实 可 以 编辑 ) 
var htmlDisplay = document.getElementById("editedHTML"); 
htmlDisplay.textContent = editor.contentWindow.document.body.innerHTML; 


通过 这 个 例子 可 以 更 好 地 体验 富 文本 编辑 功能 。 例 如 ， 单 击 图 片 就 可 以 在 浏览 器 中 操作 它 。 
可 以 调整 它 的 大 小 , 把 它 拖 到 新 位 置 ， 或 者 单 击 之 后 按 删 除 键 就 可 以 把 它 删 除 。 如 果 页 面 中 有 表 
单 控件 ， 那 么 对 它们 也 可 以 执行 相同 的 操作 。 

当然 ， 要 想 把 这 个 例子 变 得 更 实用 还 需要 做 很 多 工作 。 第 一 ， 需 要 添加 更 直观 的 编辑 控件 。 
在 此 ， 我 还 要 推荐 Opera 乐 于 助人 的 开发 人 员 写 的 那 两 篇 文章 ( http://tinyurl.com/htmlEditl1 和 
http://tinyurl.com/htmlEdit2 )， 文 章 深 入 解释 了 命令 模型 ， 但 超出 了 本 章 的 范围 。 第 二 ， 需 要 妥善 
处 理 编辑 后 的 标记 ， 比 如 通过 XMLHttpRequest (参见 12.1.1 节 ) 把 它们 发 送 给 Web 服 务 器 。 

最 后 还 要 提醒 读者 , 如 果 你 是 在 本 地 硬盘 上 运行 上 面 的 例子 , 在 有 些 浏览 器 中 可 能 会 遇 到 问 





























有 大 人 垃 
题 。( 下 和 Chrome 会 启用 安全 限制 , 而 Firefox 则 一 帆 风 顺 , 不 会 有 任何 问题 。) 为 了 避免 出 现 问题 ， 
可 以 在 http://prosetech.com/html5/ 上 运行 这 个 例子 。 
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第 二 部 分 ， 
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视频 、 图 形 和 特效 


音频 与 视频 

美妙 的 CSS3 字体 和 特效 
CSS3 与 响应 式 Web 设计 
基本 Canvas 绘 医 
高 级 Canvas 技术 : 交互 性 和 动画 











ES 早 的 时 候 ， 互 联网 主要 用 于 分 享 学 术 研 究 的 成 果 。 人 情况 很 快 就 发 生 了 改变 ，Web 似 乎 

了 一 夜 之 间 就 成 了 万 众 瞩 目的 焦点 ， 成 了 新 闻 业 和 商业 发 展 背后 的 动力 之 源 。 今 天 ， 互 
联网 最 先进 的 网 络 技术 较 少 用 于 物理 计算 , 而 更 多 地 用 于 在 全 球 范围 内 传播 猫咪 演奏 钢琴 的 病毒 
视频 。 网 络 巨 头 思 科 的 报告 指出 ， 这 个 趋势 没有 放 慢 的 迹象 ， 并 预测 到 2017 年 网 络 流量 的 80% 都 
将 用 于 视频 。 

令 人 难以 置信 的 是 ， 这 种 巨大 的 转变 居然 是 在 HTML 语 言 不 内 置 支持 视频 ， 甚 至 连 音频 都 不 
支持 的 现实 下 发 生 的 。 在 不 久 的 过 去 , 网 民 依 赖 于 Flash, 这 个 插件 大 多 数 时 候 对 大 多 数 人 都 是 有 
效 的 。 但 是 Flash 有 一 些 关键 的 短 板 ， 其 中 包括 苹果 设备 ( 比如 iPhone 和 iPad ) 不 支持 。 

为 了 解决 这 些 问 题 ，HTML5 添 加 了 <audio> 和 <video> 这 两 个 HTML 多 年 来 一 直 缺 少 的 元 素 。 
然而 ， 向 HIML5 音 频 和 视频 的 过 渡 远 没有 那么 顺利 。 数 年 来 浏览 器 厂商 身 陷 关 于 格式 的 口 诛 笔 
伐 的 战争 。 好 消息 是 ， 今 天 大 部 分 战争 已 尘埃 落 定 ， 并 且 HTMLS 音 频 和 视频 对 即便 非常 谨慎 的 
开发 者 也 是 很 好 的 选择 。 


5.1 网 络 视 频 的 演变 


在 没有 HTMLS 的 情况 下 ， 可 以 通过 两 种 方式 向 网 页 中 添加 视频 。 一 种 过 时 的 方式 是 使 用 
<embed> 元 素 把 视频 硬 塞 进 页 面 中 。 然 后 ,浏览 器 就 可 以 使 用 Windows Media Player 、Apple 
QuickTime 或 其 他 视频 播放 器 创建 一 个 视频 窗口 ， 并 把 它 放 在 页 面 中 。 

这 种 方式 的 问题 是 一 切 只 能 听天由命 。 你 没有 办 法 控制 播放 进度 ,也 不 能 提前 缓冲 视频 以 避 
免 长 时 间 的 播放 停滞 ， 甚 至 你 都 不 知道 自己 的 视频 文件 能 和 否 在 不 同 浏览 器 或 操作 系统 中 播放 。 

第 二 种 方式 是 使 用 浏览 融 插 件 ， 比 如 微软 最 近 推 出 的 Silverlight 或 最 受 欢迎 的 Adobe Flash。 
Flash 完 全 解决 了 浏览 器 支持 问题 ，Flash 视 频 能 够 在 安装 了 Flash 插 件 的 任何 地 方 播放 ; 用 数字 来 
说 , 就 是 目前 能 上 网 的 计算 机 中 有 99% 都 安装 了 Flash 播 放 器 。Flash 为 我 们 提供 了 几乎 无 限制 的 控 
制 功能 , 而 且 我 们 还 可 以 方便 地 使 用 别人 做 好 的 Flash 播 放 器 , 甚至 每 个 发 光 按钮 你 都 可 以 自己 重 
新 设计 。 

不 过 ，Flash 也 不 完美 。 为 了 把 Flash 视 频 放 到 网 页 中 ， 必 须 使 用 cobject> 和 <embed> 元 素 编写 
一 大 堆 乱 七 八 糟 的 标记 , 必须 适当 地 编码 视频 文件 , 可 能 还 必须 要 花 高 价 购买 Flash 开 发 软件 并 学 
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习 使 用 一 一 轻易 学 不 会 。 但 是 ， 最 严重 的 问题 还 在 于 苹果 的 移动 设备 iPhone 和 iPad。 它 们 根本 就 
不 支持 Flash， 因 而 通过 它们 查看 内 置 Flash 视 频 的 页 面 ， 只 能 看 到 一 个 空白 的 方 框 。 





注意 ”插件 不 可 靠 也 是 业界 的 共识 。 这 也 是 插件 的 工作 方式 决定 的 。 比 如 ， 在 访问 使 用 Flash 的 
页 面 时 ， 浏 览 器 会 把 页 面 中 的 某 个 矩形 区 域 交 给 Flash 控 制 。 多 数 情 况 下 ， 交 接 工作 的 过 
程 都 比较 顺利 。 可 是 ， 一 些小 bug 的 存在 ， 或 者 异常 的 系统 配置 ， 都 可 能 导致 意外 的 通信 
和 故障 ， 因 而 造成 视频 混乱 或 消耗 大 量 计 算 机 内 存 ， 最 终 让 上 网 变 得 缓慢 无 比 。 


尽管 如 此 , 今天 上 网 ， 不 用 iPhone 或 iPad， 你 所 看 到 的 视频 ,仍然 都 被 包装 在 迷你 Flash 应 用 
中 。 你 不 信 ? 右键 单 击 视频 播放 器 看 一 看 。 如 果 上 下 文 菜单 中 包含 “About Flash Player 11” 字 样 
的 命令 ， 那 恭喜 你 ， 你 点 的 就 是 无 所 不 在 的 Flash 持 件 。 而 且 ， 即 使 是 使 用 HTML5， 怒 怕 我 们 还 
要 准备 一 个 Flash 视 频 作 为 后 备 文件 ， 以 应 付 那 些 落 后 的 浏览 器 ( 比如 IE8 )。 























注意 ” ”YouTube 提供 一 个 试用 版 HTML5 视 频 播放 器 。 要 想 体验 , 请 访问 www.youtube.com/html5 。 
但 在 其 他 地 方 ，YouTube 仍 然 只 使 用 Flash。 除 非 你 在 用 iPhone 或 iPad， 在 这 种 情况 下 ， 
YouTube 会 智能 地 自动 切换 到 支持 HTML5 视 频 。 


5.2 HTML5 音频 与 视频 








HTML5 支 持 音 频 和 视频 的 想法 非常 简单 。 既 然 能 使 用 <img> 元 素 在 网 页 中 添加 图 像 ， 就 应 该 
能 使 用 caudio> 元 素 和 <video> 元 素 在 网 页 中 添加 音频 和 视频 。 是 这 个 道理 , 于 是 HTML5 就 增加 了 
这 两 个 元 素 。 





























不 行 就 还 用 Flash 
HTMLS 新 增 的 音频 和 视频 功能 不 能 满足 所 有 需求 。 如 果 你 需要 考虑 以 下 事项 ， 那 么 最 好 
还 是 用 Flash (至 少 目 前 还 是 要 用 )。 

口 有 许可 限制 的 内 容 。HTML5 视频 文件 没有 任何 版 权 保护 措施 。 事 实 上 ， 任 何人 都 可 像 
下 载 图 片 一 样 下 载 HTML5 视频 ， 只 要 右键 单 击 即 可 。 那 就 是 说 ， 数 字 版 权 管 理 功能 现 
在 还 在 开发 中 ， 并 且 计 划 包 含 在 HTML 5.1 中 。 

口 录制 视频 或 音频 。HTMLS 不 支持 从 一 台电 脑 到 另 一 人 台电 脑 传送 音频 或 视频 流 。 如 果 你 
想 开发 一 个 在 线 聊 天 程序 ,要 使 用 访客 机 器 上 的 麦克 风 和 摄像 头 , 还 得 用 Flash。 HTML5 
制定 者 为 实现 相同 功能 ， 正 尝试 新 增 <device> 元 素 。 但 目前 在 任何 浏览 器 中 ， 都 没有 办 
法 只 通过 HTML 实现 此 功能 。 

口 自 适 应 视频 流 。 主 流 的 、 视 频 丰 富 的 网 站 ， 比 如 YouTube， 都 需要 精细 地 控制 视频 流 和 
缓冲 。 这 些 网 站 需要 以 不 同 解析 度 提供 视频 、 进 行 实况 直播 、 根 据 访客 的 带宽 调整 视频 
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质量 。 在 HTML5 能 提供 这 些 功能 之 后 ， 视 频 分 享 网 站 可 能 会 向 HIMLS 迁移 ， 但 不 会 
完全 脱离 Flash。 

口 低 延迟 、 高 性 能 音频 。 有 些 应 用 需要 音频 一 开始 就 不 能 间断 ， 或 者 需要 同时 播放 的 多 个 

音频 之 间 完 美 配合 。 比 如 虚拟 合成 器 、 音 乐观 察 器 或 者 多 种 音效 同时 播放 的 实时 游戏 。 
虽然 浏览 器 开发 商 在 努力 提升 HTMLS5 音频 的 性 能 ， 但 目前 还 无 法 满足 要 求 。 
口 动 态 创建 或 编辑 音频 。 ee 而 是 还 需要 分 析 、 修 改 音 
频 信 息 ， 然 后 实时 生成 音频 ， 怎 么 办 ? 确实 有 一 些 新 的 标准 ， 比 如 处 在 试验 阶段 的 Web 
Audio API ( http://tinyurl.com/web-audio-API ), 可 以 为 HTML5 补充 这 部 分 功能 , 但 目前 
还 是 指望 不 上 啊 。 


5.2.1 使 用 caudio> 播 放 点 噪音 
以 下 是 使 用 caudio> 元 素 的 一 个 最 简单 的 例子 : 


<p>Hear us rock out with our new song, 
<cite>Death to Rubber Duckies</cite>:</p> 
<audio src="rubberduckies.mp3" controls></audio> 


这 里 的 src 属 性 是 要 播放 的 音频 文件 的 文件 名 。 而 controls 属 性 告诉 浏览 器 要 包含 基本 的 播 
放 控 件 。 每 个 浏览 器 中 的 播放 控件 都 不 太一 样 ， 但 用 途 都 一 样 ， 都 可 以 控制 开始 和 结束 ， 跳 到 新 
位 置 和 调节 音量 (图 5$-1 )。 














注意 ”除了 基本 的 src 和 controls 属 性 ,kxaudio> 元 素 还 支持 一 些 其 他 属性 ， 这 会 在 接 下 来 的 几 节 
中 详细 介 绍 。 








图 $-1: 这 里 是 IE ( 上 ) 、Chrome ( 中 ) 
和 Firefox ( 下 ) 中 的 播放 控件 











Hear us rock out with our new song. Death to Rubber Duckies: 


OR 





Hear us rock out with our new song. Death to Rubber Duckies: 


Hear us rock out with our new song, Death to Rubber Duckies: 


es 
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5.2.2” 预 加 载 媒体 文件 


preload 是 一 个 有 用 的 属性 ， 它 告诉 浏览 怎样 加 载 一 个 媒体 文件 。 指 定 preload 的 值 为 
auto， 让 浏览 需 下 载 整个 文件 ， We 播放。 当然 ， 下 载 过 程 是 后 台 进行 
的 ， 网 页 访客 不 必 等 待 下 载 完 成 ， 而 且 仍然 可 以 随意 查看 网 页 。 

除了 auto 之 外 ，preload 属 性 还 支持 另外 两 个 值 : metadata 和 none。 前 者 告诉 浏览 器 先 获取 音 
频 文件 开头 的 数据 块 ， 从 而 足以 确定 一 些 基 本 信息 〈 比如 音频 的 总 时 长 )。 后 者 告 ee 
预先 下 载 。 恰 当地 利用 这 些 值 ， 可 以 节省 带宽 。 比 如 ， 当 页 面 中 有 很 多 <audio> 元 素 ， 而 你 又 
认为 访客 会 播放 其 中 很 多 音频 的 时 候 ， 就 可 以 有 选择 地 使 用 前 述 三 个 值 。 

<audio src="rubberduckies.mp3" controls preload="metadata"></audio> 

如 果 使 用 的 是 none 或 netadata， 那 么 浏览 器 会 在 用 户 单 击 播放 按钮 时 立即 下 载 音 频 文件 。 
通常 ， 浏 览 需 在 下 载 后 续 数 据 时 ， 会 播放 已 经 下 载 完 的 部 分 ; 除非 你 的 网 速 很 慢 ， 否 则 应 该 不 
会 卡 。 

如 果 没 有 设置 preload 属 性 ， 浏 览 需 就 自己 决定 是 否 预先 下 载 了 。 对 这 一 点 ， 不 同 浏览 髓 的 
处 理 方式 也 不 一 样 。 多 数 浏览 器 将 auto 作 为 默认 值 ， 但 Firefox 的 默认 值 是 metadata。 不 过 ， 也 请 
大 家 注意 ， 这 个 preload 属 性 也 不 是 必须 严格 执行 的 规则 ， 而 只 是 你 对 浏览 器 的 建议 。 根 据 具体 
情况 ,浏览 器 可 以 忽略 你 的 设置 。( 有 些 旧版 本 浏览 器 根据 不 会 在 意 preload 属 性 。 










































































注意 ”如果 页 面 中 有 很 多 Kaudio> 元 素 ， 浏览 器 会 So 它们 创建 自己 的 播放 控件 。 访客 可 以 每 


次 只 播放 一 个 音频 文件 ， 也 可 以 同时 播放 


谢 


5.2.3 自动 播放 
接 下 来 再 看 看 autoplay 属 性 。 这 个 属性 告诉 浏览 器 在 加 载 完 音频 文件 后 立即 播放 ; 


<audio src="rubberduckies.mp3" controls autoplay></audio> 

如 果 不 设 置 autoplay 属 性 ， 必 须 是 用 户 单 击 播放 按钮 才 会 播放 音频 文件 。 

可 以 利用 <audio> 元 素 不 知 不 觉 地 播放 背景 音乐 ， 或 者 为 浏览 器 游戏 播放 音效 。 要 实现 背 
景 播放 ， 去 掉 controls 属 性 ， 加 上 autoplay 属 性 就 好 了 (或 者 利用 JavaScript 来 控制 播放 ， 人 参见 
5.4.1 节 )。 不 过 要 注意 ， 即 使 开启 背景 播放 ， 也 要 在 页 面 中 提供 相应 的 装置 ， 以 便 用 户 能 够 关 
闭 声 音 。 






































注意 ” 谁 也 不 愿意 浏览 一 个 播放 难听 的 背景 音乐 ， 但 却 无 法 关闭 其 声音 的 网 页 。 如 果 你 没有 给 
<audio> 元 素 添 加 controls 属 性 ， 那 必须 或 至 少 要 添加 一 个 静音 按钮 ， 利 用 JavaScript 让 用 
户 能 够 设置 静音 。 





5.2 ”HTML5 音频 与 视频 | 125 




















5.2.4 ”循环 播放 
最 后 ，loop 属 性 告诉 浏览 器 在 播放 结束 时 ， 再 从 头 开始 重新 播放 : 


<audio src="rubberduckies.mp3" controls loop></audio> 

大 多 数 浏览 器 都 可 以 流畅 地 循环 播放 音频 文件 , 因此 可 以 利用 这 一 点 创建 没有 穷尽 的 音乐 播 
放 人 体验。 关键 在 于 选择 一 段 终点 与 起 点 恰好 能 够 衔接 起 来 的 音频 片段 。 类 似 这 样 的 片段 ， 访 问 
http:/www.flashkit.conyloops/ 可 以 找到 很 多 。( 这 些 可 循环 文件 是 为 Flash 设 计 的 ,但 也 可 以 下 载 到 
MP3 和 WAV 格 式 的 。) 

要 是 你 觉得 caudio> 元 素 实 在 是 太 好 了 ， 嗯 ,我 也 承认 。5.3 节 将 介绍 让 HTML5 开 发 人 员 头 痛 
欲 裂 的 格式 问题 。 不 过 , 在 头疼 之 前 ,我 还 得 先 给 你 介绍 caudio> 元 素 的 亲密 战友 : <video> 元 素 。 











5.2.5 了 解 <video> 


<video> 与 <audio> 实 现 太 相 像 了 。 它 们 有 相同 的 src、controls 、preload 、autoplay 和 1oop 属 
性 。 下 面 就 是 一 个 直观 的 例子 : 


<p>A butterfly from my vacation in Switzerland!</p> 
<video src="butterfly.mp4" controls></video> 


同样 ，controls 属 性 告诉 浏览 器 生成 方便 的 播放 控件 〈 见 图 5-2 )。 在 大 多 数 浏 览 器 中 ， 单 击 
页 面 其 他 任何 地 方 , 播放 控件 都 会 自动 隐藏 , 而 当 鼠 标 悬 停 于 影片 画面 上 时 , 它们 又 会 显示 出 来 。 


























= 己 攻 一 | 图 5-2; 很 容易 把 evideo> 元 素 当 





























全 加 | 司 smpendeonm p>| Gvdeo | | 全 加 | 成 Flash 视 频 窗口 。 但 在 cvideoy 
= = 
A butterfly from my vacation in Switzerland! SL 素 上 右 击 鼠 标 ， 去 看 到 | 比 


Flash 更 简单 的 菜单 ， 其 中 包含 
把 视频 文件 保存 到 本 地 的 命 
令 。 在 有 的 浏览 器 里 ， 菜 单 中 
可 能 还 会 包含 改变 播放 速度 、 
循环 播放 视频 、 全 屏 播 放 及 静 


音 等 选项 。 











R Pause 


Mute 


Save video as... 
Copy video URL 


Play speed 上 























<video> 元 素 和 <audio> 元 素 一 样 ,也 有 src、controls、preload、autoplay 和 1loop 属 性 。 可 是 ， 
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如 果 启 用 了 自动 播放 ， 要 使 它 不 那么 招 人 讨厌 ， 可 以 将 其 设置 为 muted 状 态 ， 这 在 大 部 分 浏览 器 
上 会 关闭 声音 。 通 常 ， 用 户 可 以 点 击 扬声器 图 标 来 重新 打开 声音 。 
除了 与 <audio> 共 同 的 属性 之 外 ，<video> 元 素 还 有 另外 3 个 属性 : height 、width 和 poster。 
其 中 ，height 和 width 属 性 用 于 设置 视频 窗口 的 (像素 ) 大 小 。 下 面 这 行 代码 会 创建 一 个 400 
像素 x 300 像 素 的 视频 窗口 : 


<video src="butterfly.mp4" controls width="400" height="300"></video> 
在 设置 这 个 尺寸 时 ,应 该 注意 按照 视频 的 原始 比例 设置 。 而 明确 设置 视频 窗口 大 小 ,可 以 在 
视频 尚未 加 载 完 成 时 (或 者 视频 加 载 失 败 时 )， 不 影响 页 面 的 布局 。 





























注意 ”不论 怎 样 设置 视频 容器 的 尺寸 ,视频 画面 总 是 会 保持 自身 的 比例 。 比 如 ， 如 果 将 一 个 400 
x 300 像 素 的 视频 放 在 一 个 800 x 450 像 素 的 视频 容器 中 , 将 获得 一 个 未 拉 伸 且 适 应 容器 的 
最 大 视频 画面 ， 即 600 x 450 像 素 。 这 会 在 视频 画面 的 两 边 各 留 出 100 像 素 的 空白 。 





最 后 ，poster 属 性 用 于 设置 替换 视频 的 图 片 。 浏 览 需 在 三 种 情况 下 会 使 用 这 个 图 片 : (1) 视 
频 第 一 帧 未 加 载 完毕 ; (2) 把 preload 属 性 设置 为 none; (3) 没有 找到 指定 的 视频 文件 。 

<video src="butterfly.mp4" controls poster="swiss alps.jpg"></video> 

好 了 ,我们 现在 已 经 介绍 完 有 关 HTML5 音 频 和 视频 标记 的 所 有 内 容 了 。 然 而 ， 通 过 巧妙 地 
使 用 JavaScript, 实际 上 还 有 更 多 可 能 性 。 不 过 , 我 们 已 经 不 能 再 回避 了 ，, 在 继续 讨论 利用 <audio> 
和 <video> 元 素 做 一 些 吸 引 人 的 东西 之 前 ， 无 论 如 何 得 直面 令 人 头疼 的 音 视频 编 解码 问题 。 










































































媒体 组 
HTML5 标 准 指定 了 一 个 不 常用 的 属性 mediagroup， 它 适用 于 <audio> 和 <video> 元 素 。 可 以 
用 mediagroup 属 性 将 多 个 媒体 文件 连接 到 一 起 ， 这 样 它们 的 播放 就 是 同步 的 。 只 需 给 每 个 
<audio> 和 <video> 元 素 赋予 相同 的 mediagroup 名 称 〈 可 以 是 任何 想 要 的 值 ): 
<video src="shot12 cam1.mp4" controls 
mediagroup="shot12"></video> 


<Video src="shot12 cam2.mp4" controls 
mediagroup="shot12"></video> 


现在 ， 如 果 用 户 在 第 一 个 视频 窗口 点 击 播放 (shot12 cam1.mp4 )， 两 个 窗口 都 会 立刻 开始 
播放 。 

mediagroup 属 性 可 以 用 于 同步 同时 发 生 的 视频 文件 ， 比 如 ， 从 不 同 角度 拍摄 的 体育 赛事 录 
像 。 也 可 以 用 它 来 同步 音频 和 视频 ， 这 对 需要 基于 用 户 的 语言 或 无 障碍 访问 需求 来 选择 不 同 的 
音 轨 很 有 用 。 上 比如， 可 以 给 针对 视觉 障碍 者 的 音 轨 添 加 一 个 描述 情节 进展 的 画外音 。 为 此 ， 需 
要 在 页 面 中 隐藏 多 个 caudio> 元 素 ， 每 个 都 取 一 个 不 同 的 mediagroup 名 称 ， 然 后 添加 一 些 简单 的 
JavaScript， 用 以 基于 用 户 的 需求 设置 <video> 元 素 的 mediagroup 名 称 来 匹配 相应 的 <audio> 元 素 。 

不 幸 的 是 ，mediagiroup 现 在 还 不 是 很 有 用 ， 因 为 支持 它 的 浏览 器 有 限 。Chrome 和 Opera 支 
持 ， 但 最 新 的 IE 和 Firefox 完 全 不 支持 。 
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5.3 HTML5 媒体 格式 


<video> 和 <audio> 元 素 是 不 是 太 好 用 了 ? 是 的 ， 有 时 候 它们 是 这 样 的 。 问 题 是 在 一 个 浏览 名 
上 运行 得 很 好 的 媒体 格式 可 能 在 男 一 个 浏览 天 上 运行 得 很 糟 。 

我 们 刚刚 列举 的 示例 使 用 了 两 种 流行 的 标准 : MP3 音 频 和 H.264 视 频 。 这 两 种 格式 是 大 部 分 
浏览 器 的 最 爱 ， 但 在 Opera 浏 览 器 上 ， 它 们 不 能 运行 (图 5$-3 )。 
















































































PE oes 5 枚 对 ”图 5-3; 如 果 在 Opera 中 加 载 一 个 使 用 了 H.264 视 频 
Rs ” 的 页 面 ， 播 放 控件 是 不 可 用 的 ， 在 本 该 出 现 视频 
< 名 守 SimpleVideo.html 四 的 地 方 会 出 现 空 




















A butterfly from my vacation in Switzerland! 





























幸运 的 是 , 可 以 用 一 个 格式 后 备 措施 来 解决 这 个 问题 , 可 参见 5.4.1 节 。 但 在 学 习 如 何 做 之 前 ， 
需要 更 深入 地 了 解 一 下 今天 Web 中 音频 和 视频 格式 的 范围 ， 以 及 目前 浏览 如 的 支持 状况 。 














5.3.1 谈 谈 格式 


官方 HTML5 标 准 没有 要 求 浏 览 器 支持 任何 一 种 视频 或 音频 格式 。( 之 前 的 版 本 要 求 过 , 但 最 
后 经 过 激烈 的 讨论 后 还 是 删除 了 。) 因此 ， 浏 览 名 开发 商 可 以 自由 选择 想 要 支持 的 格式 ， 而 事实 
上 他 们 骨子里 就 不 可 能 达成 一 致 。 表 5-1 展 示 了 目前 不 同 浏览 器 使 用 的 标准 。 


表 5-1 某 些 HTML5 浏 览 器 支持 的 音频 和 视频 标准 






























































格 式 说 明 常用 扩展 名 “MIME 类 型 

MP3 世界 上 最 流行 的 音频 格式 .mp3 audio/mp3 

Ogg Vorbis 免费、 开放 的 标准 ， 能 够 提供 高 质量 的 压缩 音频 ， 可 以 与 MP3 .ogg audio/ogg 
媲 

WAV 未 加 工 数字 音频 的 初始 格式 。 由 于 未 经 压缩 ， 所 以 体积 奇 大 , 大 .wav audio/wav 
多 数 情况 下 不 适合 Web 

H.264 视频 压缩 的 行业 标准 ,特别 适合 高 清晰 度 视 频 。 广泛 应 用 于 消费 .mp4 video/mp4 
设备 (如 蓝光 播放 器 和 便携 式 摄像 机 )、Web 分 享 站 点 (如 YouTube 
和 Vimeo) 和 Web 揪 件 (如 Flash 和 Siverlight 

Ogg Theora 免费、 开放 的 视频 标准 ， 出 自 Vorbis 音 频 标准 的 制定 者 之 手 。 品 。 .ogv Video/ogg 



































质 和 性 能 不 及 H.264， 但 可 以 满足 大 多 数 人 的 需要 
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( 续 ) 














格 式 说 明 常用 扩展 名 MIME 类 型 
WebM 最 新 的 视频 格式 ， 谷 歌 在 买 下 VP8 之 后 ， 将 其 改 为 免费 标准 。 有 .webm video/webm 























评论 指出 ， 其 品质 尚 不 如 H.264， 而 且 可 能 牵涉 其 他 人 的 专利 ， 
因此 将 来 或 许 会 引发 诉讼 。 

表 5-1 中 也 列 出 了 媒体 文件 应 有 的 扩展 名 。 为 什么 扩展 名 很 重要 ? 回答 这 个 问题 ， 必 须 认 识 
到 一 个 视频 文件 实际 上 有 三 个 标准 参与 其 中 。 首 先 , 也 是 最 明显 的 ,就 是 视频 编 解 码 器 ， 用 于 把 
视频 压缩 为 数据 流 (包括 H.264 、Theora 和 WebM )。 其 次 是 音频 编 解码 器 ， 利 用 相关 的 标准 压缩 
一 或 多 个 音频 文件 。( 例如 ，H.264 一 般 使 用 MP3， 而 Theora 则 使 用 Vorbis。) 第 三 是 容器 的 格式 ， 
规定 了 如 何 把 视频 、 音 频 、 描 述 性 信息 以 及 静态 图 片 和 字幕 等 填充 物 组 合 到 一 起 。 一 般 来 说 , 文 
件 的 扩展 名 表示 容器 的 格式 。 因 此 ，.mp4 意 味 着 MPEG-4 容 器 ，.ogv 表 示 Ogg 容 器 。 

比较 微妙 的 地 方 在 这 里 : 多 数 容器 格式 都 支持 一 些 不 同 的 视频 和 音频 标准 。 例 如 ， 流 行 的 
Matroska 容 舌 ( .mkv ) 可 以 包含 H.264 或 Theora 编 码 的 视频 。 考虑 到 不 让 你 的 脑袋 疼 得 裂 开 , 表 5-1 
针对 每 种 视频 格式 给 出 了 一 种 最 常用 ， 同 时 也 是 在 Web 上 获得 了 最 可 靠 支 持 的 容器 格式 。 

表 5$-1 中 也 列 出 适当 的 MIME 类 型 ， 这 些 在 配置 Web 服 务 需 的 时 候 有 用 。 如 果 不 小 心 用 错 了 
MIME 类 型 ， 那 么 浏览 器 可 能 就 会 项 固 地 拒绝 播放 本 身 好 好 的 媒体 文件 。( 要 是 你 还 不 太 明 白 什 
么 是 MIME 类 型 ， 如 何 配 置 ， 可 以 参考 下 一 节 的 内 容 。) 





























































































































MIME 类 型 及 其 使 用 原因 

MIME 类 型 ( 有 时候 也 叫 内 容 类 型 ) 就 是 一 小 段 信息 ， 表 示 菜 种 Web 资 源 的 内 容 类 型 。 例 
如 ， 网 页 的 MIME 类 型 就 是 text/html。 

Web 服 务 器 在 把 某 个 资源 发 送 给 浏览 器 的 时 候 ， 会 在 前 面 发 送 MIME 类 型 。 比 如 ， 假 设 浏 
览 器 请 求 了 一 个 网 页 SuperVideoPlayerPage.html， 服 务 器 会 发 送 text/html 这 个 MIME 类 型 、 其 他 
一 些 相 关 信 息 和 实际 的 文件 内 容 。 浏 览 器 接收 到 该 MIME 类 型 后 ， 就 知道 该 如 何 处 理 后 面 的 内 
容 。 这 样 ， 就 不 必 根 据 文件 的 扩展 名 或 其 他 信息 去 判断 了 。 

对 于 常见 的 文件 类 型 (如 HTML 页 面 和 图 片 ) 不必 担 心 其 MIME 类 型 ， 因 为 Web 服 务 器 都 
能 够 适当 地 处 理 。 但 某 些 Web 服 务 器 或 许 没有 配置 音频 和 视频 的 MIME 类 型 。 这 就 是 问题 了 ， 
如 果 Web 服 务 器 在 发 送 媒体 文件 时 发 错 了 MIME 类 型 ， 会 导致 浏览 器 不 知 所 措 。 而 结果 一 般 就 
是 不 能 播放 。 

为 避免 这 个 问题 ， 务 必要 按照 表 5$-1 列 出 的 MIME 类 型 正确 地 配置 Web 服 务 器 ， 同 时 也 不 要 
总 了 给 自己 的 音频 和 视频 文件 使 用 正确 的 扩展 名 。( 光 正确 配置 MIME 类 型 还 不 够 ， 还 得 使 用 
正确 的 扩展 名 。 因 为 Web 服 务 器 要 成 对 儿 使 用 这 两 方面 信息 。 比 如 ， 把 .mp4 文 件 配置 为 
Video/mp4 这 个 MIME 类 型 后 ， 却 在 视频 文件 上 使 用 了 .mpFour 作 为 扩展 名 ， 那 Web 服 务 器 就 不 
知道 你 想 让 它 做 什么 了 。) 

配置 MIME 类 型 并 不 难 ， 但 实际 的 步骤 却 因 Web 托 管 公司 (或 者 如 果 你 自己 管理 自己 的 服 
务 器 ， 就 是 你 的 Web 服 务 器 软件 ) 而 异 。 如 果 网 站 托管 公司 使 用 流行 的 cPanel 工 具 ， 可 以 找到 
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名 为 MIME Types 的 图 标 ， 单 击 之 后 就 可 以 看 到 如 图 $-4 所 示 的 页 面 。 如 果 你 还 有 什么 疑问 ， 请 
联系 托管 公司 寻求 帮助 。 



































EE 写本 主要 图 5$-4:， 在 这 里 我 们 添加 了 一 个 新 
| 名 [ EARL https://avenger.hawkhost.com:2083/frontend/3/mime/ mime.html 言 7|C | 外相 ; 的 MIME 类 型 9 以 支 持 H.264 视 频 
a a -| ”文件 ,如 果 你 的 网 站 已 经 配置 好 了 
A @ 这 个 MIME 类 型 ， 那 你 ps 多 此 
Tip: separate multiple extension types with a space 一 举 了 
| 
MIME TYPE es pe REMOVE 


video/mp4 mp4 


Systcm MIME Typecs 
MIME Type Exiewslon(s) 

















5.3.2 ”浏览 器 对 媒体 格式 的 支持 情 : 


HTML5 的 格式 问题 由 来 已 入 。 浏览 器 厂商 各 自 不 同 的 需求 是 冲突 的 导 火 索 。Mozilla ( Firefox 
开发 商 ) 和 Opera ( Opera 浏 览 右 开发 商 ) 等 小 公司 ,不 愿意 为 MP3 音 频 和 H.264 视 频 等 流行 的 标 
准 支付 许可 使 用 费 。 可 是 , 这 真 的 很 难 责怪 他 们 ， 毕 竞 他 们 自己 的 开发 成 果 都 是 允许 他 人 自由 使 
用 的 。 

而 大 一 些 的 公司 ， 比 如 微软 和 苹果 ,又 都 有 合理 的 理由 不 使 用 没有 许可 限制 的 标准 。 他 们 报 
怨 那 些 标准 并 不 完善 ( 目前 还 没有 硬件 加 速 ), 而 且 应 用 得 也 不 够 广泛 ( 不 像 H.264 已 经 广泛 应 用 
于 便携 式 摄像 机 、 蓝 光 播 放 器 和 其 他 很 多 设备 )。 实 际 上 ， 最 大 的 问题 还 在 于 ， 那 些 没 有 许可 限 
制 的 标准 可 能 涉及 其 他 人 的 知识 产权 。 如 果 情 况 确 实 如 此 ,而 且 微 软 、 人 苹果 这 样 的 大 公司 又 使 用 
了 它们 ， 那 么 打上 一 场 旷 日 持久 的 官司 就 在 所 难免 了 。 

地 好， 形势 在 好 转 。2013 年 ，Firefox 受 协 并 同意 支持 MP3 和 H.264。 谷 歌 尽 管 扬 言 要 在 Chrome 中 
移 除 对 H.264 的 支持 , 却 从 未 这 样 做 并 且 现 在 也 不 太 可 能 这 样 做 。Oprea 仍 然 是 这 场 博 弈 的 项 固 派 一 一 
到 目前 为 止 。 浏 览 器 对 媒体 格式 支持 的 详情 ， 请 参见 表 5-2 ( 音频 格式 ) 和 表 5-3 ( 视频 格式 )。 


表 5-2 ”浏览 器 对 HTML5 音 频 格式 的 支持 情 ， 






































IE Firefox Chrome Safari Opera SafariiOS Android 
MP3 9 21 5 3.1 二 3 2.3 
Ogg Vorbis 到 3.6 3 加 10.5 一 一 
WAV 一 3.6 8 3.1 10.5 一 一 
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表 5-3 ”浏览 器 对 HTML5 视 频 格式 的 支持 情况 

















IE Firefox Chrome Safari Opera SafariiOS Android 
H.264 Video 9 21 5 3.1 一 4 2.3 
Ogg Theora ES 35 5 二 10.5 = = 
WebM 二 4 6 一 10.6 一 2.3 
* iOS 3.x 支 持 视频 ， 但 旧版 的 Safari 浏 览 器 中 存在 一 些微 小 的 视频 方面 的 pug。 例 如 ， 设 置 poster 属 性 (参见 5.2.5 节 ) 
会 导致 视频 无 法 播放 。 





移动 设备 上 的 浏览 右 也 各 有 各 的 问题 。 有 些 不 支持 像 自 动 播放 和 循环 这 样 的 功能 , 因为 这 些 
功能 会 耗 尽 电量 以 及 宝贵 的 带宽 。 但 即便 你 不 打算 使 用 这 些 功能 , 移动 设备 也 需要 做 专门 的 考虑 


来 确保 良好 的 视频 播放 性 能 以 及 将 数据 使 用 量 最 小 化 。 针 对 移动 设备 进行 视频 编码 时 ,可 以 降低 
质量 ， 可 能 的 话 ， 还 可 以 降低 分 辩 率 。 











提示 “这 里 有 一 个 经 验 法 则 ,如果 你 想 让 视频 能 在 移动 设备 上 播放 , 那 就 应 该 使 用 H.264 Baseline 
Profile ( 而 非 HightProfile ) 编码 。 对 于 iPhone 和 Android 手 机 ， 视 频 尺寸 不 必 超 过 640 像 素 x 
480 像 素 ( 如 果 还 要 支持 黑 匡 手机 ,那么 不 必 超 过 480 像 素 x360 像 素 ), 很 多 编码 软件 ( 参 
见 后 面 的 附注 栏 ) 都 有 针对 移动 视频 进行 优化 的 预 设 选项 。 


H.264 许 可 

我 的 视频 格式 是 H.264， 我 需要 付 许可 费 吗 ? 

如 果 你 在 自己 的 产品 中 使 用 了 H.264 解 码 器 ( 比如 ， 你 开发 了 一 款 浏览 器 ， 能 播放 H.264 
编码 的 视频 )， 那 当然 得 付费 。 而 如 果 你 是 提供 视频 的 人 ， 那 就 要 看 情况 了 。 

首先 ， 听 听 不 用 掏 钱 的 情况 。 如 果 你 使 用 HH.264 制 作 免 费 视频 ， 不 用 交 一 分 钱 。 如 果 你 制 
作 的 是 商业 视频 ， 但 实际 上 并 没有 销售 ( 比如 拍摄 商业 广告 或 通过 视频 访谈 推销 自己 )， 那 也 
不 用 花 钱 。 

如 果 你 在 自己 的 网 站 上 销售 HH.264 编 码 的 视频 ， 那 可 能 就 需要 向 MPEG-LA 支 付 许可 费 了 ， 
要 么 现在 ， 要么 将 来 。 关 键 的 问题 是 有 多 少 用 户 。 如 果 用 户 数 少 于 10 万 ,不 用 交 钱 。 如 果 用 户 
数 达 到 10 万 , 但 少 于 25 万 , 那么 应 该 交 25 000 美 元 /年 。 对 于 一 家 如 此 规模 的 视频 销售 公司 来 说 ， 
这 笔 钱 似乎 还 不 算 多 , 更 何况 还 有 很 多 其 他 花 销 比 这 要 多 得 多 ,比如 购买 专业 的 编码 工具 。 可 
是 ， 这 个 数字 在 2016 年 修订 许可 条 款 后 还 会 有 变化 。 打 算 靠 Web 视 频 挣 钱 的 大 公司 更 愿意 使 用 
开放 的 、 没 有 许可 限制 的 视频 标准 ， 比 如 Theora 或 WebM。 

要 全 面 了 解 H.264 的 许可 条 款 ,请 参考 www.mpegla.com/main/programs/AVC/Pages/Intro.aspx。 


5.4 后备 措施 : 如 何 讨好 每 一 款 浏览 器 


在 写作 本 书 的 时 候 , 以 HTML5 <video> 元 素 呈 现 的 H.264 格 式 视频 占有 80% 以 上 的 上 网 用 户 。 这 
个 比例 已 相当 高 ， 但 就 其 自身 而 言 还 不 够 高 。 要 创建 每 个 人 都 能 看 见 的 视频 ， 需 要 借助 后 备 措施 。 
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Web 开 发 人 员 用 在 HIML5 视 频 上 的 后 备 措施 有 两 种 。 第 一 种 是 格式 后 备 措施 。 这 个 机 制 是 
HTML5 内 置 的 ， 人 允许 你 将 一 种 格式 的 媒体 文件 ( 比如 MP3 文 件 ) 替换 成 另 一 种 格式 的 文件 ( 比 
如 Ogg Vorbis )。 这 种 后 备 措施 解决 了 5.3.1 节 中 提 到 的 Opera 的 问题 。 可 是 ， 这 对 不 支持 HTML5 媒 
体 功 能 的 旧版 浏览 器 无 效 ， 比 如 IE8。 

第 二 种 后 备 措施 是 一 个 技术 方案 。 如 果 浏 览 器 不 支持 cvideo> 和 <audio> 元 素 ， 可 以 用 久 经 考 
验 的 Flash 播 放 器 替代 。 

严谨 的 Web 开 发 人 员 会 将 这 两 种 后 备 方案 都 用 上 。 时 间 紧 迫 〈 或 者 懒 一 点 ) 的 Web 开 发 人 员 
有 时 会 省 去 格式 后 备 措施 ， 以 省 去 对 视频 文件 重新 编码 的 工作 。 毕 竟 ，Opera 浏 览 器 〈 唯一 不 支 
持 H.264 的 桌面 浏览 器 ) 只 占 1% 的 浏览 器 使 用 份额 ， 开 发 者 们 推测 Opera 可 能 最 终 会 被 迫 支持 
H.264。 另 一 方面 ，Flash 后 备 措施 更 容易 实现 ， 因 为 它 使 用 相同 的 媒体 文件 ， 并 且 它 兼容 了 更 多 
的 浏览 器 ， 比 如 “ 慌 龙 时 代 ” 的 IE8。 所 以 忽略 Flash 后 备 措施 是 在 冒险 。 

接 下 来 的 两 小 节 将 介绍 这 两 种 后 备 措 施 。 


5.4.1 支持 多 种 格式 


<video> 和 <audio> 元 素 有 一 个 内 置 的 格式 后 备 系统 。 要 使 用 它 ， 就 要 从 <video> 或 <audio> 元 素 
中 删除 src 属 性 ， 然 后 向 套 一 组 csource> 元 素 。 以 下 是 一 个 caudio> 元 素 般 套 <source> 元 素 的 例子 : 


<audio controls> 
<source src="rubberduckies.mp3" type="audio/mp3"> 
<source src="rubberduckies.ogg" type="audio/ogg"> 
</audio> 


在 此 , 一 个 caudio> 元 素 散 套 了 两 个 csource> 元 素 ， 每 个 csource> 元 素 都 指向 一 个 不 同 的 音频 
文件 。 浏览 器 会 选择 播放 第 一 个 它 所 支持 的 文件 。 Firefox 和 Opera 会 播放 rubberduckies.ogg, 而 IE、 
Safari 和 Chrome 会 播放 rubberduckies.mp3 。 不 幸 的 是 ， 需 要 由 你 自己 将 内 容 编码 成 想 要 支持 的 每 
个 格式 ， 这 是 一 个 浪费 时 间 、CPU 和 磁盘 空间 的 过 程 。 

理论 上 讲 , 浏览 器 可 以 通过 下 载 部 分 文件 内 容 来 判断 它 是 否 支 持 相 应 的 格式 。 但 更 好 的 做 法 
则 是 像 这 里 一 样 使 用 type 属 性 提供 正确 的 MIME 类 型 信息 (参见 上 一 节 )。 如 此 一 来 , 浏览 器 就 只 
会 下 载 它 认为 自己 能 够 播放 的 文件 了 。( 要 了 解 正确 的 MIME 类 型 ， 请 参考 表 5-1。 ) 

同样 的 做 法 也 适用 于 <video> 元 素 。 下 面 这 个 例子 使 用 了 两 个 相同 的 视频 文件 ， 但 一 次 用 
H.264 编 码 ， 一 次 用 WebM 编 码 ， 以 确保 支持 所 有 的 HTML5 浏 览 器 : 


<video controls width="700" height="400"> 
<source src="beach.mp4" type="video/mp4"> 
<source src="beach.webm" type="video/webm"> 
</video> 


这 个 例子 有 一 些 新 的 东西 。 在 使 用 多 个 视频 格式 时 ， 应 该 把 H.264 编 码 的 文件 放 在 前 头 。 否 
则 ,运行 iOS 3.x 的 iPad 无 法 正确 播放 该 文件 。( iOS 4 已 经 修复 了 这 个 问题 , 但 将 H.264 格 式 的 文件 
放 在 前 头 总 没有 坏处 。) 
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注意 浏览 器 认为 它 支持 某 种 类 型 的 音频 或 视频 文件 ， 并 不 意味 着 它 一 定 能 播放 该 文件 。 例 如 ， 
你 可 能 会 对 自己 的 文件 使 用 不 常见 的 高 比特 率 , 或 者 在 某 种 常用 的 容器 格式 中 使 用 一 种 生 
僻 的 编 解码 器 。 要 解决 这 个 问题 ， 可 以 通过 type 属 性 提供 类 型 和 编 解码 器 信息 ， 但 这 样 可 
能 会 导致 标记 混乱 。HTML5 对 此 给 出 了 详细 的 描述 ,请 参见 http://tinyurl.com/media-types。 


如 果 你 的 想法 更 大 胆 , 那 可 以 创建 一 个 同时 支持 桌面 和 移动 设备 的 视频 页 面 。 这样 的 话 , 不 
仅 要 考虑 H.264 和 WebM 视 频 格式 , 还 要 考虑 为 硬件 配置 不 高 、 上 网 速度 慢 的 设备 创建 一 个 窄带 宽 
版 本 。 为 确保 移动 设备 播放 轻 量 级 视频 ， 桌 面 浏览 器 播放 高 品质 视频 ， 需 要 写 一 些 JavaScript, 或 
者 使 用 媒体 查询 ， 这 会 在 8.4 节 介绍 。 














编码 媒体 文件 
现在 , 你 应 该 知道 自己 想 使 用 哪些 格式 了 。 但 你 不 一 定 知 道 怎 么 把 媒体 文件 转换 成 这 些 格 

式 。 别 担心 ， 有 很 多 工具 可 以 帮 你 。 有 的 工具 可 以 一 次 转换 很 多 文件 ， 有 的 工具 则 以 产 出 高 品 

质 内 容 著称 ( 一 分 钱 一 分 货 )， 而 有 的 工具 是 在 强大 的 Web 服 务 器 上 执行 转换 ， 不 用 等 待 。 关 

键 是 根据 自己 的 具体 需求 ， 找 到 适合 你 的 编码 工具 。 

以 下 向 大 家 推荐 几 种 编码 工具 。 
口音 频 编 辑 器 。 如 果 你 想 编辑 WAV 文 件 ， 并 将 它们 保存 为 MP3 或 Vorbis 格 式 ， 只 要 找 一 个 
简单 的 音频 编辑 器 即 可 。 我 推荐 Audacity ( http://audacity.sourceforge.net/ )， 这 是 一 个 免 
费 的 编辑 器 ， 有 Mac 和 Windows 版 本 。 不 过 ， 要 转换 成 MP3， 还 要 另 安 装 LAME MP3 编 
码 器 ( http://lame.buanzo.com.ar/ )。 另 外 ，Goldwave ( http://www.goldwave.com/ ) 也 是 
一 个 类 似 的 编辑 器 ， 虽 然 不 免费 ， 但 价格 也 只 是 象征 性 的 。 
口 Miro Video Converter。 这 个 自由 、 开 源 的 程序 有 Windows 和 Mac OS X 版 ， 可 以 将 任何 
视频 文件 转换 成 WebM、Theora 或 了 264， 而 且 还 针对 iPad、iPhone 和 Android 设 备 预 设 了 
不 同 大 小 和 格式 。 唯 一 不 足 的 地 方 就 是 , 它 没有 提供 高 级 调 校 选项 , 无 法 控制 编码 过 程 。 
要 试 试看 ? 访问 http:/www.mirovideoconverter com。 
口 Firefogg。 这 是 一 个 Firefox 插 件 ( http://firefogg.org/ ), 可 以 创建 Theora 或 WebM 视 频 文件 。 
与 Miro 相 比 , 它 提供 了 更 多 选项 ,而且 是 在 你 的 浏览 器 中 运行 ( 所 有 工作 都 在 本 地 完成 ， 
不 会 涉及 Web 服 务 器 )。 

口 HandBrake。 这 是 一 个 开源 、 多 平台 的 软件 ( http://handbrake.fr/ )， 能 把 多 种 格式 转换 

为 H.264 (及 其 他 几 种 最 新 的 格式 )。 

口 Zencoder 。 这 是 一 种 专业 的 、 能 与 你 的 网 站 集成 工作 的 媒体 编码 服务 。Zencoder 
( http://zencoder.com/ ) 能 从 Web 服 务 器 上 下 载 视频 文件 、 将 它们 转换 成 你 需要 的 所 有 格 
式 和 比特 率 , 为 转换 后 的 文件 命名 并 分 门 别 类 地 放 在 相应 的 位 置 下 。 比较 大 的 视频 网 站 
可 以 与 Zencoder 合 作 ， 谈 一 个 合适 的 按 月 付费 价格 。 
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5.4.2 ”添加 Flash 后 备 措施 


格式 后 备 系统 有 一 个 关键 的 限制 :只 能 在 支持 caudio> 和 <video> 元 素 ( 几乎 今天 市 面 上 的 每 
一 个 浏览 絮 都 可 以 ,除了 IE8 ) 的 浏览 融 上 运行 。 要 让 网 页 在 非 HTML5 浏 览 右 上 运行 ,需要 添加 
Flash 后 备 措施 。 

要 理解 Flash 后 备 措施 怎样 工作 的 ,首先 要 知道 有 史 以 来 的 所 有 浏览 器 在 对 待 不 认识 的 标签 时 
行为 都 一 样 : 视而不见 。 比 如 ， 假 设 IE8 遇 到 了 陌生 的 <video> 开 始 标签 ， 它 只 会 “一 笑 而 过 ”， 
根本 不 去 检查 其 src 属 性 。 然 而 ,浏览 絮 不 会 忽略 不 认识 的 元 素 中 包含 的 内 容 ， 这 可 是 一 个 非常 
重要 的 差异 。 换 句 话 说 ， 对 于 下 面 的 标记 : 

<video controls width="400" height="300"> 

«source src="discoparty.mp4" type="video/mp4"> 
<source src="discoparty.webm" type="video/webm"> 


<p>We like disco dancing.</p> 
</video> 


不 支持 HTML5 的 浏览 锅 看 到 的 只 有 : 

<p>We like disco dancing.</p> 

这 也 就 是 我 们 所 说 的 后 备 内 容 。 利 用 这 种 后 备 方式 ,可 以 向 旧版 本 浏览 器 用 户 提供 相应 的 说 
明 ， 而 不 会 让 人 感到 迷惑 不 解 。 

















注意 ”支持 HTML5 音 频 的 浏览 器 即使 不 能 播放 媒体 文件 ,也 会 忽略 后 备 内 容 。 例如 ， 如 果 Opera 
遇 到 了 一 个 指向 H.264 格 式 的 文件 但 未 提供 Theora 格 式 的 <video> 元 素 , 视频 播放 器 不 会 显 
示 任 何 内 容 。 


知道 了 怎么 添加 后 备 内 容 后 , 接 下 来 就 要 考虑 添加 什么 内 容 了 。 后 备 内 容 可 以 是 一 句 话 ， 比 
如 “你 的 浏览 器 不 支持 HTML5 视 频 ， 请 升级 浏览 器 ”。 但 网 站 访客 认为 这 种 方式 极其 不 礼貌 ，, 要 
是 让 他 们 看 到 这 句 话 ， 你 就 永远 跟 他 们 无 缘 了 。 

比较 合适 的 后 备 内 容 是 男 一 段 可 以 播放 的 视频 ， 也 就 是 要 使 用 一 个 普通 的 非 HTML5 页 面 。 
比如 ， 可 以 使 用 YouTube 视 频 和 窗口， 但 必须 遵守 YouTube 的 规定 ( 视频 长 度 不 能 超过 15 分 钟 ， 而 
且 不 能 包含 令 人 反感 和 侵犯 版 权 的 内 容 )。 准备 好 内 容 后 , 可 以 先 上 传 到 YouTube， 上 传 时 选择 一 
种 最 佳 格式 ， 而 YouTube 会 将 其 重新 编码 成 它 文 持 的 格式 。 还 没有 在 YouTube 上 传 过 视频 ? 先 看 
看 这 里 吧 : www.youtube.com/my videos_upload。 

男 一 种 可 能 是 使 用 Flash 视 频 播 放 咒 。( 如 果 你 想 展 示 音 频 ， 就 是 Flash 音 频 播放 器 。) 各 式 各 
样 的 Flash 播 放 器 太 多 了 ， 甚 中 很 多 都 是 免费 的 ， 至 少 非 商 业 用 途 不 收费 。 而 且 ， 大 多 数 Flash 视 
频 播 放 咽 还 都 支持 HTML5 视 频 中 常用 的 H.264 格 式 。 

下 面 这 个 例子 展示 了 把 流行 的 Flowplayer Flash ( http://flash.flowplayer.org ) 插入 到 HTML5 
<video> 元 素 中 的 标记 : 


<video controls width="700" height="400"> 
<source src="beach.mp4" type="video/mp4"> 






























































134 | 第 5 章 音频 与 视频 


<SOUITCe src="beach.webm" type="video/webm"> 


<object id="flowplayer" width="700" height="400" 
data="flowplayer-3.2.16.swf" 
type="application/x-shockwave-flash"> 
<param name="movie" value="flowplayer-3.2.16.swf"> 
<param name="flashvars" value="'config={"clip":"beach.mp4"}'> 
</object> 
</video> 


代码 中 的 粗 体 部 分 是 浏览 器 传递 给 Flowplayer Flash 的 参数 ,包含 视频 文件 的 名 字 。 请 注意 , 虽 
然 这 个 例子 考虑 了 三 种 可 能 的 情况 ( H.264 格 式 的 HTML5 视 频 、WebM 格 式 的 HTML5 视 频 和 H.264 
格式 的 Flash 视 频 ),， 但 只 需要 两 个 视频 文件 ， 减少 了 编码 工作 量 。 图 5-5 展 示 了 这 个 例子 的 结果 。 
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5-5; 同一 个 视频 ， 以 三 种 方式 提供 : 对 IE9 ( 上 ) 、 
Firefox ( 中 ) 使 用 HTML 视 频 ， 对 IE7 ( 下 ) 使 用 Flash 
视频 
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当然 ， 还 是 有 些 人 连 Flash 都 没 装 ， 而 且 浏览 器 也 不 文 持 HTML5S。 对 这 些 用 户 ， 可 以 提供 另 
一 种 形式 的 后 备 内 容 ， 比 如 一 个 指向 视频 文件 的 下 载 链接 ， 点 击 可 以 在 外 部 程序 中 打开 。 这 样 的 
后 备 内 容 要 放 在 Flash 内 容 后 面 ， 但 仍然 在 <object> 元 素 内 : 


<video controls width="700" height="400"> 
<source src="beach.mp4" type="video/mp4"> 
<source src="beach.webm" type="video/webm"> 








<object id="flowplayer" width="700" height="400" 
data="http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf" 
type="application/x-shockwave-flash"> 
<param name="movie" value="beach.mp4"> 
<img src="beach thumbnail.jpg" alt="A lazy day at the beach"> 
<p>Your browser does not support HTML5 video or Flash.</p> 
<p>You can download the video in <a href="beach.mp4">MP4 H.264</a> 
or <a href="beach.webm">WebM</a> format.</p> 
</object> 
</video> 


有 趣 的 是 ， 有 男 一 种 实现 Flash 后 备 措施 的 方式 。 到 目前 为 止 ， 你 所 看 到 的 例子 都 以 Flash 作 
为 HTML5 的 后 备 措 施 , 即 给 每 个 用 户 提 供 HTML5 视 频 ( 或 音频 ), 除了 那些 使 用 旧 浏 览 器 的 用 户 ， 
他 们 会 获得 Flash。 可 是 ， 可 以 将 这 个 方案 反 转 一 下 ， 优 先 使 用 Flash，HTML5 作 为 后 备 措施 。 这 
会 给 所 有 用 户 提供 Flash， 除 了 那些 没有 安装 Flash 的 。 如 果 你 的 网 站 已 经 有 成 熟 的 Flash 播 放 器 来 
星 现 视频 内 容 ， 但 想 拓展 到 iPad 和 iPhone 用 户 ， 这 种 策略 就 很 合适 。 如 果 你 的 媒体 要 求 超出 了 
HTMLS 当 前 的 支持 范围 ( 如 5.2 节 附注 中 所 介绍 的 )， 也 可 以 选择 这 种 方案 。 
假如 你 想 主 要 提供 Flash 视 频 ， 以 HTML5 作 为 后 备 那 在 前 面 的 例子 上 简单 调整 一 下 就 好 。 首 
先是 <object> 元 素 ， 然 后 在 其 中 舱 套 <video> 元 素 ， 最 后 是 </object> 标 签 结 束 。 这 种 情况 下 ， 需 
要 把 后 备 内 容 放 在 最 后 一 个 <source> 元 素 之 后 : 


<object id="flowplayer" width="700" height="400" 
data="http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf" 
type="application/x-shockwave-flash"> 

<param name="movie" value="butterfly.mp4"> 


















































<video controls width="700" height="400"> 
<SOUITCe src="beach.mp4" type="video/mp4"> 
<source src="beach.webm" type="video/webm"> 


<img src="beach thumbnail.jpg" alt="A lazy day at the beach"> 
<p>Your browser does not support HTML5 video or Flash.</p> 
<p>You can download the video in <a href="beach.mp4">MP4 H.264</a> 
or <a href="beach.webm">WebM</a> format.</p> 
</video> 
</object> 


顺便 说 一 下 ， 有 很 多 JavaScript 播 放屁 直接 支持 HTML5 并 且 有 一 个 内 置 的 Flash 后 备 措施 。 比 
如 ，Flowplayer 提 供 了 一 个 叫 Flowplayer HTML5 的 版 本 ( 可 以 在 http://flowplayer.org 下 载 )， 它 会 
根据 需要 自动 选择 使 用 cvideo> 元 素 或 Flash 后 备 措施 。 这 种 方式 的 优势 是 简化 了 HTML 代 码 ， 
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为 有 个 小 能 手 ( JavaScript 驱 动 的 媒体 播放 器 ) 处 理 了 一 切 ; 不 足 之 处 在 于 这 远离 了 纯粹 的 HTML5 
解决 方案 ， 在 HIML5 浏 览 器 无 处 不 在 的 那 一 天 ， 这 会 是 你 想 立 刻 就 用 的 方案 。 


5.5 ”使 用 JavaScript 控制 播放 器 


到 现在 为 止 ， 我 们 介绍 了 一 些 基础 知识 ， 也 知道 了 怎么 围绕 新 的 <audio> 和 <video> 元 素 拿 出 
合理 的 支持 方案 , 使 媒体 文件 不 仅 能 在 Flash 播 放 器 里 播放 , 而且 能 在 更 多 的 网 页 中 直接 播放 。 这 
些 新 技术 还 是 能 派 上 用 场 的 。 

如 果 只 谈 标 记 ， 那 么 利用 <audio> 和 <video> 也 就 只 能 做 那么 多 了 。 然 而 ， 这 两 个 元 素 都 有 一 
个 扩展 的 JavaScript 对 象 模 型 ,让 我 们 能 通过 代码 控制 播放 过 程 。 事实 上 , 甚至 还 可 以 调整 一 些 细 
节 ， 比 如 播放 速度 。 这 些 功 能 是 浏览 絮 标 准 的 音频 和 视频 播放 器 力 所 不 能 及 的 。 

好 了 , 接 下 来 的 几 节 ,我们 通过 两 个 实际 的 例子 , 介绍 JavaScript 对 音频 和 视频 的 支持 。 第 一 
个 例子 是 为 游戏 添加 音效 , 第 二 个 例子 将 创建 一 个 自 定义 的 视频 播放 器 。 最 后 , 我 们 还 将 讨论 几 
个 其 他 人 利用 HTML5 和 JavaScript 开 发 出 来 的 解决 方案 ， 包 括 可 换 肤 的 播放 器 和 无 障碍 字幕 。 
































5.5.1 添加 音效 


通过 <audio> 元 素 并 不 是 只 能 播 歌曲 和 录音 ， 还 可 以 利用 它 播放 音效 。 这 一 点 使 其 特别 适合 
为 游戏 配乐 和 添加 音效 。 

图 5-6 展 示 了 一 个 非常 简单 的 例子 ， 网 页 中 显示 着 可 交互 的 弹跳 球 动画 。 在 第 8 章 学 习 
<canvas> 的 时 候 ， 我 们 再 介绍 这 个 例子 的 代码 。 现 在 ， 我 们 需要 考虑 的 是 怎么 为 它 配 上 合适 的 
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图 5-6: 这 个 页 面 在 画布 元 素 上 运行 一 个 简单 的 动 
画 ， 单 击 按钮 可 以 添加 新 的 弹跳 球 ( 新 球 会 下 落 ， 
并 不 断 在 画布 区 域内 弹跳 ) 。 另 外 ， 用 鼠标 单 击 
可 以 改变 球 的 弹跳 方向 

















| 园 cAHTMLS\Chaptero5\SoundEffectshtml 忆 - OX| 








SS Sound Efects | 











口 





Add Ball | | Clear Canvas 

















Ball Size: 15 回 Connect Balls 











屿 100% ~ 




















5.5 ”使 用 JavaScript 控制 播放 器 | 137 











实际 上 ， 这 个 例子 组 合 了 背景 音乐 和 音效 。 添 加 背景 音乐 很 简单 ， 只 要 在 页 面 中 加 上 一 个 不 
可 见 的 <audio> 元 素 即 可 : 


<audio id="backgroundMusic" loop> 
<source src="TheOwlNamedOrion.mp3" type="audio/mp3"> 
<source src="TheOwlNamedOrion.ogg" type="audio/ogg"> 
</audio> 


我 们 没有 给 音频 播放 器 添加 autoplay 或 controls 属 性 ， 因 此 开始 的 时 候 没 有 声音 ， 也 看 不 到 
播放 器 界面 。 不 过 ,倒是 添加 了 一 个 loop 属 性 ， 这 样 只 要 一 开始 播放 ， 就 会 不 断 反 复 播放 。 为 了 
控制 声音 的 播放 ， 需 要 使 用 两 个 音频 ( 或 视频 ) 对 象 的 方法 : play() 和 pause()。 怎 么 没有 停止 
播放 的 方法 呢 ? 的确 没有 ， 要 停止 播放 ， 可 以 先 暂 停 视频 ， 然 后 将 其 currentTime 属 性 重 置 为 0， 
即 下 次 播放 会 从 头 开始 。 

了 解 了 这 些 以 后 ， 就 可 以 在 添加 第 一 个 球 时 开始 播放 背景 音乐 了 ， 很 简单 : 


var audioElement = document.getElementById("backgroundMusic"); 
audioElement.play(); 


在 清除 画布 的 时 候 停止 播放 背景 音乐 同样 很 简单 : 


var audioElement = document.getElementById("backgroundMusic"); 
audioElement.pause(); 
audioElement.currentTime = 0; 


前 面 介绍 过 ， 同 时 播放 多 少 个 音频 文件 是 没有 限制 的 。 因 此 ， 在 背景 音乐 开始 播放 的 同时 ， 
我 们 可 以 再 琢磨 一 下 怎么 添加 更 好 玩 的 音效 。 
对 这 个 例子 来 说 , 小 球 每 次 从 地 面 或 墙 上 弹 开 的 时 候 , 都 要 播放 弹簧 突然 释放 的 “ 踊 喂 ” 声 。 
为 了 增强 趣味 性 ,我们 使 用 了 几 种 不 同 的 音效 。 当 然 ,我 们 这 里 只 是 模仿 真实 的 游戏 ， 如 果 是 真 
实 的 游戏 ， 灵 怕 要 集成 十 几 个 甚至 更 多 声音 文件 。 
实现 上 述 设计 的 方案 有 很 多 ,但 并 不 都 可 行 。 比 如 ， 可 以 再 添加 一 个 caudio> 元 素 ， 用 于 播 
放 音 效 。 然 后 ， 每 次 小 球 撞击 反弹 时 ， 都 通过 修改 其 src 属 性 加 载 一 个 新 音频 文件 。 这 个 方案 有 
两 个 问题 。 首 先 ， 每 个 caudio> 元 素 每 次 只 能 播放 一 个 声音 文件 ， 因 此 如 果 有 多 个 球 连 续 反弹 ， 
那 要 么 不 播放 紧 接 着 的 、 重 琶 的 声音 ， 要 么 立即 停止 前 一 个 音效 ， 加 载 并 播放 后 一 个 。 其 次 , 重 
新 设置 src 属 性 会 强迫 浏览 器 请 求 音频 文件 。 虽 然 有 些 浏览 器 能 很 快 加 载 完 新 音频 〈 如果 音 频 已 
经 在 缓存 中 了 )， 但 IE 不 行 。 结 果 ， 就 是 音效 会 延迟 一 一 球 都 弹 开 半 秒 钟 了 ， 音 效 才 播 放 。 
更 好 的 方案 是 使 用 一 组 caudio> 元 素 ， 每 个 播放 一 种 音效 。 以 下 就 是 示例 代码 : 
<audio id="audio1"> 
<source src="boing1.mp3" type="audio/mp3"> 
<source src="boing1.wav" type="audio/wav"> 
</audio> 
<audio id="audio2"> 
<source src="boing2.mp3" type="audio/mp3"> 
<source src="boing2.wav" type="audio/wav"> 
</audio> 


<audio id="audio3"> 
<source src="boing3.mp3" type="audio/mp3"> 
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<source src="boing3.wav" type="audio/wav"> 
</audio> 


注意 这 里 的 3 个 <audio> 元 素 使 用 了 不 同 的 音频 文件 ， 但 这 并 不 是 必须 的 。 比 如 ， 你 可 以 使 用 
同一 个 音频 文件 ， 而 为 了 支持 重合 音效 ， 可 能 还 得 使 用 3 个 音频 播放 器 。 








发 生 碰 撞 反 弹 时 ，JavaScript 代 码 会 调用 一 个 名 为 boing() 的 自 定义 函数 。 这 个 函数 会 按照 顺 
序 取得 下 一 个 <audio> 元 素 ， 然 后 播放 声音 。 

以 下 就 是 实现 音效 播放 的 代码 : 

// 记 录 <audio> 元 素 的 个 数 


var audioElementCount = 3; 


// 记 录 当 前 播放 的 <audio> 元 素 
var audioElementIndex = 1; 


function boing() { 
// 取 得 循环 列表 中 的 下 一 个 caudio> 元 素 
var audioElementName = "audio" + audioElementIndex; 
var audio = document.getElementById(audioElementName); 


// 播 放 音 效 
audio.currentTime = 0; 
audio.play(); 


// 把 计数 器 更 新 为 下 一 个 Caudio> 元 素 
if (audioElementIndex == audioElementCount) { 
audioElementIndex = 1; 


else { 
audioElementIndex += 1; 


} 
} 


提示 要 体验 一 下 混合 了 背景 音乐 和 弹跳 球 音效 的 页 面 ， 可 以 访问 http://prosetech.com/html5。 


这 个 例子 能 够 正常 运行 , 可 如 果 你 想 实 现 更 大 范围 的 音效 怎么 办 ? 最 简单 的 方案 就 是 为 每 个 
音效 单独 创建 一 个 隐藏 的 caudio> 元 素 。 如 果 不 行 ， 还 可 以 动态 设置 已 有 caudio> 元 素 的 src 属 性 。 
甚至， 可 以 像 下面 这 样 动态 地 创建 新 caudio> 元 素 : 


var audio = document.createElement("audio"); 
audio.src = "newsound.mp3"; 


或 者 更 简单 : 


var audio = new Audio("newsound.mp3"); 
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不 过 ， 这 两 种 方式 都 存在 问题 。 首 先 ， 必 须 在 播放 音频 之 前 设置 src 属 性 。 和 否则 就 会 造成 音 
效 延 人 运 ， 在 正中 特别 明显 。 其 次 ， 必 须知 道 浏览 器 支持 的 音频 格式 ， 这样 才 能 设置 正确 的 文件 类 
型 。 为 此 ， 就 得 使 用 笨拙 的 canPlayType() 方 法 。 给 这 个 方法 传人 音频 或 视频 的 MIME 类 型 ， 它 会 
告诉 你 浏览 器 是 否 能 播放 该 格式 一 一 基本 上 准确 。 如 果 浏 览 器 不 支持 传人 的 类 型 , canPlayType() 
方法 会 返回 空 字符 串 , 如 果 该 方法 认为 浏览 絮 可 以 , 则 返回 “probably”, 如 果 它 希望 浏览 器 可 以 ， 
则 返回 “maybe”, 但 这 些 都 不 能 保证 真 的 可 以 播放 。 之 所 以 会 有 判断 失误 的 时 候 ， 主 要 是 因为 有 
时 候 浏览 器 虽然 支持 相应 的 容器 , 但 该 容器 中 却 使 用 了 浏览 器 不 支持 的 编 解码 器 ， 而 即使 浏览 器 
支持 编 解码 器 ， 但 也 可 能 不 支持 其 编码 设置 。 

大 多 数 开 发 人 员 喜 欢 下 面 这 种 编码 方式 ， 即 只 要 canPlayType() 不 返回 空 字符 串 ， 就 说 明 浏 
览 句 支持 相应 的 格式 : 


if (audio.canplayType("audio/ogg")) { 
audio.src = "newsound.ogg"; 

















} 
else if (audio.canplayType("audio/mp3")) { 
audio.src = "newsound.mp3"; 


} 


5.5.2 ”创建 自 定义 视频 播放 器 


使 用 JavaScript 操 作 <audio> 和 <video> 元 素 的 最 常见 理由 ， 就 是 构建 自己 的 播放 器 。 基 本 思想 
很 简单 ， 不 添加 controls 属 性 ， 但 有 播放 窗口 ， 因 此 可 以 在 下 方 添加 自己 的 播放 控件 。 最 后 ， 添 
加 JavaScript 代 码 ， 让 新 控件 发 挥 作用 。 图 5-7 展 示 了 一 个 例子 。 














Duyrwe «EE -二 图 5-7: 制作 自己 的 HTML5 视 频 播放 器 很 简单 ( 要 
€ 3 C [© fie//C/HTMLS/Chaptert2005/Uglyplayerhtml 罕 3e| 故 好 可 不 简单 ) 。 这 个 例子 中 包含 标准 的 播放 控件 、 
播放 进度 条 和 其 他 一 些 按钮 ， 展 示 了 JavaScript 对 
<video> 元 素 的 全 方位 控制 能 

















World's Ugliest Video Player 
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每 个 视频 播放 器 都 需要 一 套 基本 的 播放 按钮 。 图 5-7 就 使 用 了 普通 的 按钮 。 


<button onclick="play()">Play</button> 
<button onclick="pause()">Pause</button> 
<button onclick="stop()">Stop</button> 


这 儿 个 按钮 会 触发 以 下 简单 的 函数 : 


function play() { 
video.play(); 


function pause() { 
video.pause(); 


function stop() { 
video.pause(); 
video.currentTime = 0; 


} 


另外 3 个 播放 控制 按钮 可 不 太 常 见 ， 它 们 可 以 修改 playbackRate 以 改变 播放 速度 。 例 如 ， 把 





playbackRate 设 置 为 2， 视 频 会 以 正常 速度 的 两 倍 播放 ， 不 过 由 于 
正常 ， 只 是 速度 加 快 了 。 这 个 功能 对 于 快速 看 完 一 段 拖 形 的 培训 视频 是 很 有 用 的 。 类 似 地 ， 把 
playbackRate 设 置 为 0.5， 会 导致 视频 比 正常 速度 放 慢 一 半 播 放 ， 而 把 playbackRate 设 置 为 -1， 速 
度 不 变 ， 只 是 会 倒退 播放 一 一 在 有 些 浏览 器 中 ， 可 能 无 法 顺畅 地 实现 此 功能 : 


function speedUp() { 
video.play(); 
video.playbackRate = 2; 
} 


function slowDown() { 
video.play(); 
video.playbackRate = 0.5; 


function normalSpeed() { 
video.play(); 
video.playbackRate = 1; 
} 

















创建 播放 进度 条 更 有 意思 一 些 。 进 度 条 的 标记 实际 上 就 是 两 个 息 套 的 <div> 元 素 : 


<div id="durationBar"> 


<div id="positionBar"><span id="displayStatus">Idle.</span></div> 


</div> 


提示 “播放 进度 条 是 非常 适合 使 用 <pTogress> 元 素 (参见 4.6.2 节 ) 实现 的 功能 。 但 是 ， 由 于 支持 
<pirogress> 元 素 的 浏览 器 有 限 一 一 比 支持 HTMLS 视 频 的 浏览 器 少 得 多 


使 用 两 个 cdiv> 来 实现 类 似 的 功能 。 


， 因 此 这 个 例子 就 


音 高 校正 ， 所 以 音频 听 起 来 





5.5 ”使 用 JavasScript 控制 播放 器 | 141 





外 面 的 <div> 元 素 ( durationBar ) 显示 实心 边框 ,勾勒 出 进度 条 的 整个 轮廓 ， 表 示 视 频 的 完整 
播放 时 间 。 内 部 的 <div> 元 素 ( positionBar ) 表示 当前 播放 的 时 间 点 ， 视 觉 上 就 是 在 黑色 方 框 中 填 
入 蓝 色 。 最后, 内 部 <div> 中 的 <span> 元 素 保存 着 状态 文本 , 用 于 在 播放 期 间 显示 当前 时 间 点 ( 秒 )。 

用 于 为 这 两 个 长 条 添加 样式 的 CSS 规 则 如 下 : 


#durationBar { 
border: solid 1px black; 
width: 100%; 
margin-bottom: 5px; 


} 





#positionBar { 
height: 30px; 
color: white; 
font-weight: bold; 
background: steelblue; 
text-align: center; 


在 视频 播放 过 程 中 ,<video> 元 素 会 连续 触发 onTimeUpdate 事 件 , 通过 响应 这 个 事件 可 以 更 新 
播放 进度 条 
<video id="videoplayer" ontimeupdate="progressUpdate()"> 
<source src="butterfly.mp4" type="video/mp4"> 


<source src="butterfly.webm" type="video/webm"> 
</video> 


在 此 ， 代 码 会 取得 视频 的 当前 时 间 点 (保存 在 currentTime 属 性 中 )， 除 以 视频 总 时 间 (保存 
在 duration 属 性 中 )， 然 后 将 得 到 的 百分比 转换 为 positionBar <div> 元 素 的 百分比 长 度 : 


function progressUpdate() { 
// 动 态 设置 蓝 色 的 positionBar， 从 0 到 100% 
var positionBar = document.getElementById("positionBar"); 
positionBar.style.width = (video.currentTime / video.duration * 100) + "%"; 








// 显 示 已 经 播放 的 秒 数 ， 保留 两 位 小 数 
displayStatus.innerHTML = (Math.round(video.currentTime*100)/100) + 


mi 


n 
sec"; 


提示 ”如 果 你 还 想 做 得 更 精致 一 点 ， 可 以 再 添加 一 个 下 载 进 度 条 ， 显 示 当 前 已 经 下 载 和 缓冲 的 
多 少 内 容 。 浏 览 器 已 经 把 这 个 功能 内 置 在 它们 自己 的 播放 器 中 了 。 如 果 你 要 自己 做 ， 需 
要 处 理 onprogress 事 件 ， 并 利用 seekable 属 性 。 要 了 解 cvideo> 元 素 提 供 的 更 多 属性 、 方 
法 和 事件 ， 可 以 看 看 微软 这 篇 文章 http://tinyurl.com/video-obj-js。 


5.5.3 ”JavaScript 媒 体 播放 器 
如 果 你 真 的 想 标 新 立 蜡 , 你 可 以 自己 开发 自己 的 音频 和 视频 播放 器 。 但 这 可 不 是 一 项 小 工程 ， 
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特别 是 像 交 互 式 播 放 列 表 这 样 的 时 获 功 能 ,不 容易 实现 。 而 且 ， 如 果 不 是 有 一 个 艺术 设计 部 分 作 
后 盾 ， 最 终 出 来 的 产品 界面 很 可 能 会 丑陋 不 堪 。 

别 苦 恼 了 ， 除 了 自己 开发 ， 还 有 很 多 现成 的 HTML5 播 放 器 可 供 选 择 。 网 上 有 很 多 人 已 经 开 
发 了 免费 的 基于 JavaScript 的 媒体 播放 器 。 在 此 , 我 推荐 两 个 靠 谱 的 , 一 个 是 VideoJS ( http://videojs. 
com/ )， 另 一 个 是 jQuery 粉丝 们 喜欢 的 jPlayer ( http://www.jplayer.org/ )。 这 两 款 播放 器 都 很 小 ,使 
用 方便 ， 而 且 可 以 换 肤 。 换 肤 的 意思 就 是 通过 更 换 样 式 表 ， 可 以 修改 播放 控件 的 外 观 。 

大 多 数 JavaScript 媒 体 播放 器 (包括 VideoJS 和 jPlayer ) 都 内 置 了 Flash 后 备 ， 这 样 就 省 得 我 们 
自己 去 下 载 Flash 播 放 器 了 。 而 且 ，jPlayer 还 提供 了 自己 的 播放 列表 功能 ,让 用 户 可 以 把 音频 和 视 
频 文件 组 织 到 一 个 列表 中 ( 图 5-8 )。 
































[aaanj 3 [| 屋 | 图 5-8. 使 用 Player 的 播放 列表 功能 ， 可 以 
| jp Ce as video Ee and audi... [+| 过 提供 多 个 音频 或 视频 文件 。 用 户 既 可 按 顺 
\E ”| jf http://www.jplayer.org/latest/demo-02/ -CI 会 全 序 播放 ， 也 可 以 单 击 播放 任意 一 个 。 图 中 











的 播放 列表 包含 三 个 视频 文件 
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要 使 用 VideoJS， 首先 需要 从 VideoJS 网 站 下 载 JavaScript 文 件 。 然 后 , 像 下 面 这 样 在 页 面 中 添 
加 对 相应 JavaScript 和 样式 表 文 件 的 引用 : 


“!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>...</title> 
<script src="video.js"></script> 
<link rel="stylesheet" href="video-js.css"> 
</head> 
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之 后 , 像 平 常 使 用 cvideo> 元 素 一 样 , 准备 多 个 <source> 元 素 和 Flash 后 备 即 可 。( VideoJS 播 放 
器 的 示例 代码 中 已 经 内 置 了 Flowplayer 作 为 Flash 后 备 ， 如 果 你 不 喜欢 ， 可 以 换 成 其 他 Flash 播 放 
器 。) 事实 上 ， 要 说 普通 HTML5 视 频 页 面 与 使 用 VideoJS 的 页 面 有 什么 不 一 样 ， 那 就 是 对 于 后 者 ， 
你 必须 得 用 一 个 特殊 的 <div> 元 素 包装 <video> 元 素 ， 如 下 所 示 : 


<div class="video-js-box "> 
<video class="video-js" width="640" height="264" controls ...> 








</video> 
</div> 


仅 此 而 已 。 虽 然 是 扩展 HTML5， 但 这 么 简单 还 真是 让 人 民 意 。 


5.6 视频 字幕 


正如 我 们 前 儿童 介绍 过 的 , HTML5 的 制定 者 经 常会 考虑 Web 的 无 障碍 性 。 所 谓 无 障碍 ,就 是 
让 残疾 人 也 能 方便 快捷 地 使 用 功能 丰富 的 网 页 。 

为 图 片 添加 无 障碍 信息 很 容易 ， 只 要 在 alt 属 性 中 放 上 一 段 合 适 的 描述 性 文本 即 可 。 那 么 ， 
视频 流 中 与 alt 文 本 对 应 那个 东西 应 该 是 什么 呢 ? 人 们 一 致 认为 是 字幕 , 也 就 是 在 视频 播放 期 间 ， 
适时 出 现 的 一 段 段 的 内 容 对 白 或 话 外 音 。 说 起 字幕 ， 有 人 可 能 会 想到 电视 上 的 闭 源 字幕 〈closed 
caption ), 通常 都 是 人 物 对 话 或 者 画面 内 容 的 补充 说 明 。 关键 是 , 字幕 可 以 让 即使 听 不 见 的 人 (或 
者 不 想 在 办 公 室 里 打开 电脑 音箱 , 但 又 忍 不 住 观 看 《钢铁 侠 4》 预 告 片 的 人 ) 也 能 把 视频 看 明白 。 

图 5-9 是 一 个 有 字幕 的 视频 。 





















































- °° 图 5-9: 这 个 视频 的 字幕 在 常见 的 位 
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A butterfly from my vacation in Switzerlandl! 
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5.6.1 标记 时 间 的 文本 轨道 和 WebVTT 


从 视频 技术 上 来 讲 , 字幕 是 释 加 在 视频 上 的 说 明文 字 。 一 个 字幕 序列 就 是 标记 时 间 的 文本 轨 
道 , 它 有 多 种 格式 , 但 有 一 些 基 本 的 相似 之 处 。 它 们 都 是 带 有 时 间 标 记 的 、 以 时 间 顺 序 排列 的 普 
通 文 本 , 保存 在 普通 文本 文件 中 。 这 里 有 一 个 以 WebVTT ( Web Video Text Tracks ) 格式 写 的 时 间 
标记 文本 轨道 ， 这 是 HTML5S 仿 好 的 格式 。 下 面 是 4 行 字幕 : 


WEBVTT 






































00:00:05.000 --> 00:00:10.000 
This caption appears 5 seconds in and lingers until the 10 second mark. 


00:01:00.000 --> 00:01:10.000 
Now 1 minute has passed. Think about that for 10 seconds. 


00:01:10.000 --> 00:01:15.000 
This caption appears immediately after the second caption disappears. 


00:01:30.000 --> 00:01:35.000 5 


Captions can use <i>line breaks</i> and <b>simple</b> HTML markup. 

如 你 所 见 ，WebVTT 文 件 的 每 一 条 都 指明 了 3 项 信息 : 字幕 出 现 的 时 间 ( 以 小 时 : 分 钟 : 秒 
的 格式 ) 字 幕 消失 的 时 间 和 相关 字幕 文本 。 把 这 些 内 容 保存 在 一 个 扩展 名 为 .vtt( 比如 subtitles.vtt ) 
的 文件 中 ， 就 得 到 了 一 个 随时 可 用 的 标记 时 间 文 本 轨道 文件 。 
虽然 字幕 看 上 去 简单 ， 却 有 许多 要 求 高 精度 的 细节 。 比 如 ,你 可 能 想 要 控制 换行 ,格式 化 文 

， 将 字幕 移 到 视频 窗口 的 其 他 位 置 ， 或 者 显示 一 次 填充 一 个 字 的 卡拉 OK 格式 字幕 。 这 就 是 为 
， 近 50 种 不 同 的 标记 文本 轨道 格式 。 事实 上 , 时 间 标 记 文 本 标准 之 间 的 斗争 和 音 视频 编码 
格式 战争 一 样 丑恶 不 堪 。 

目前 ，HTML5 正 式 标准 并 没有 指定 应 该 用 哪 种 格式 。 但 是 ， 浏 览 器 厂商 一 致 文 持 WebVTT 
这 个 仍 在 演变 中 的 标准 ， 它 是 受 桌面 媒体 播放 器 所 使 用 的 SRT 格 式 启 发 演变 而 来 。 浏 览 器 厂商 没 
有 采用 W3C 已 经 打磨 了 10 年 的 更 成 熟 的 TTML ( Timed Text Markup Language ) 标准 ， 因 为 它 太 复 
杂 了 。 有 目前， 下 10 (以 及 更 新 版 ) 是 唯一 全 方位 支持 TTML 的 浏览 需 


























提示 ”可 以 在 http://dev.w3.org/html5/webvtt 了 解 更 多 关于 WebVTT 标 准 的 知识 ， 包 括 修改 字幕 格 
式 和 样式 的 技术 。 如 果 需 要 写字 幕 方面 的 帮助 , 可 以 访问 微软 漂亮 的 字幕 生成 器 页 面 ( 如 
图 5-10 )， 地 址 是 http://tinyurl.com/capmaker。 
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1. 选择 一 个 视频 2. 播放 时 添加 字幕 


[€) tt emicrosoftcomjte .ba HTML5 Video Caption Maker Video 





Enter URL of video file: httpV/prosetech com/html5/beachn] | Load | Load Sample 


Video: Caption list: 
00:00.000 00:0i|247 Wt was a dusty day.. 
00:02.247 00:051441 at the beach 








Pause to enter caption for segment from 00:02.247 to 00:05.441 





at the beach 


Play Pat Save | Save & Continue Clear All 


Choose caption file format TM @® WebVTT Hide caption file display 


Select and copy the caption file contents below and paste into a .vtt file or save it to a file using the "Save to File” button below: 
WEBVTT 


98:98.988 --> 99:92.247 
It was a dusty day... 


88:82.247 --> 68:95.441 
.at the beach 


SavetoFile Copyto Clipboard 


3. 复制 完成 的 WebVTT 文 本 








图 $-10: 要 使 用 字幕 生成 
器 ， 首 先 必 须 给 它 指定 
引 功 司 | ”一 个 已 经 在 Web 上 的 视 
频 文件 ( 输入 URL 然 后 
点 击 Load ) 。 在 视频 播 
放 时 ， 快 速 添加 字幕 很 
容易 ( 在 视频 窗口 下 面 
的 框 中 输入 ， 然 后 点 击 
Save ) 。 当 一 切 都 做 完 
后 ， 可 以 从 下 面 的 文本 
框 中 复制 出 完整 的 
WebVTT 文 本 
























































5.6.2 ”使 用 <track> 添 加 字幕 











拥有 WebVTT 字 幕 文件 之 后 , 就 需要 将 其 与 视频 文件 配对 。 使 用 的 元 素 是 <track>。 将 其 添加 


到 <video> 元 素 内 ， 在 任意 csource> 元 素 之 后 


<video controls width="700" height="400"> 
<source src="butterfly.mp4" type="video/mp4"> 
<source src="butterfly.webm" type="video/webm"> 


<track src="butterfly.vtt" srclang="en" kind="subtitles" label="English" 


default> 
</video> 











<track> 元 素 有 几 个 属性 。 首 先是 src 属 性 ,指定 了 字幕 文件 。srclang 属 性 指定 了 字幕 文件 的 
语言 代码 ， 这 是 给 无 障碍 访问 工具 准备 的 。 这 里 用 en 表示 语言 为 英文 (可 以 从 http://tinyurl. 











com/l-codes 中 获取 更 具 异 域 风 情 的 语言 代码 )。 




















kind 属 性 描述 了 字幕 中 的 内 容 类 型 。HTML5 标 准 提供 了 5 种 选择 ,但 只 有 两 种 可 用 作 弹 出 式 


字幕 。 如 果 字 幕 中 包含 了 对 话 的 转录 或 翻译 ， 可 以 设置 subtitles 











改 性 值 ;， 如果 字幕 中 包含 了 对 
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话 和 音效 及 音乐 线索 的 描述 ， 可 以 设置 captions 属 性 。 








TF 





提示 当 你 能 听见 音频 却 不 懂 它 的 意思 时 ， 用 subtitles 合 适 ， 比 如 ， 在 看 一 个 外 语 片 的 时 候 。 
当 根 本 没有 音频 的 时 候 ， 用 captains 合 适 ， 比 如 ， 为 了 不 吵 醒 淮 边 工 位 的 同事 而 将 播放 
器 静音 的 时 候 。 


Kind 属 性 的 值 还 有 descriptions( 无 法 获取 视频 时 的 替换 文本 , 并 且 可 以 被 语音 合成 器 读 出 
来 )、chapters ( 章节 标题 ,可 用 于 导航 )、metadata ( 可 以 通过 JavaScript 代 码 获取 的 少量 信息 )。 
视频 播放 器 不 会 显示 这 些 属 性 的 值 ， 所 以 需要 另 一 个 工具 或 者 JavaScript 代 码 来 获取 并 使 用 这 些 
信息 。 

Label 属 性 用 来 设置 显示 在 视频 播放 器 字幕 菜单 中 的 文本 ， 点 击 视频 窗口 下 面 的 小 按钮 可 以 
调 出 这 个 菜单 。 如 果 想 要 让 用 户 从 多 个 字幕 文件 中 选择 ,标签 文本 就 非常 重要 了 。 比 如 ， 下 面 这 
个 视频 有 两 个 字幕 文件 : 

<video controls width="700" height="400"> 

<source src="butterfly.mp4" type="video/mp4"> 


<source src="butterfly.webm" type="video/webm"> 


<track src="butterfly.vtt" srclang="en" kind="subtitles" label="English" 
default> 


<track src="butterfly fr.vtt" srclang="fr" kind="subtitles" label="French"> 
</video> 


第 一 个 ctrack> 元 素 有 default 属 性 ， 所 以 它 就 是 初始 化 时 会 选用 的 字幕 。 但 用 户 可 以 点 击 字 
幕 按钮 选择 另 一 个 字幕 文件 ( 如 图 5-11 )。 















































， - 本 到 图 5-11: 支持 <track> 元 素 的 浏 
从 | VideoWithSubtitles.ht 人 ~ 0 | 大 video | | ni 览 器 会 像 寿 图 这 样 添 加 一 个 字 
A butterfly from my vacation ln Switzerland|! 幕 选择 按 钮 o 有 重 它 9 用 户 可 


以 切换 或 者 关闭 字幕 


》 


Bs 
, 
WA 


A English 
LsyoeTollllons lena Y French 


人 @) 00001 国 
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即便 视频 只 有 一 个 字幕 文件 , 字幕 列表 仍然 有 两 个 选择 : 字幕 和 一 个 关闭 字幕 的 选项 。 如 果 
想 让 用 户 可 以 选 字幕 ,但 希望 字幕 初始 时 是 关闭 的 ,只 需 确保 没有 任何 ctrack> 元 素 设置 了 default 
属性 。 这 样 ， 视 频 在 开始 播放 时 就 关闭 了 字幕。 























注意 字幕 文件 不 只 是 为 了 无 障碍 访问 和 无 声 播放 。 搜 索引 擎 也 可 以 抓 取 字 幕 文件 里 的 信息 并 
用 它 改 善 搜 索 结果 。 事实 上 , 未 来 的 超级 智能 搜索 引擎 可 以 用 WebVTT 信 息 , 通过 匹配 检 
索 关 键 字 和 字幕 ， 让 检索 者 直接 到 达 视 频 中 指定 的 播放 位 置 。 


5.6.3 ”浏览 器 对 视频 字幕 的 支持 情况 


浏览 器 渐渐 开始 支持 <track> 元 素 。 在 写 这 本 书 的 时 候 ，Firefox 还 完全 不 支持 ， 但 Mozilla 的 
开发 者 们 计划 将 来 支持 。 表 5-4 列 出 了 当前 的 支持 情况 。 
表 5-4 ”浏览 器 对 <track> 元 素 的 支持 情况 
IE Firefox Chrome Safari Opera SafariiOS Android 
最 小 版 本 号 10 宇 26 6 15 一 2 
* Safari 没 有 提供 用 于 切换 和 打开 或 关闭 字幕 的 按钮 。 

















注意 ”如果 在 Chrome 中 测试 使 用 字幕 的 视频 ， 需 要 将 视频 文件 上 传 到 服务 器 。 如 果 只 是 简单 地 
从 本 地 启动 视频 文件 ，Chrome 可 以 播放 视频 ， 但 不 能 抓 取 匹配 的 WebVTT 文 件 。 

















幸运 的 是 ， 可 以 放心 使 用 ctrack> 元 素 。 不 支持 的 浏览 虽 会 忽略 它 ， 没 有 不 良 影响 。 

如 果 需 要 在 所 有 HTML5 浏 览 器 均 有 效 的 字幕 方案 ， 有 一 种 简单 的 变通 方案 。 可 以 如 人 往常 一 
样 使 用 <track> 元 素 ， 再 结合 JavaScript 作 为 补充 ， 比 如 Captionatorjs ( http://captionatorjs.com )。 
Captionator 会 在 视频 窗口 上 覆盖 一 个 浮动 元 素 ， 当 播放 到 合适 的 点 ，Captionatorjs 会 从 WebVTT 
文件 中 获取 字幕 文本 并 将 其 插入 到 浮动 元 素 中 。 
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第 6 共 


理 





美妙 的 CSS3 字 体 和 特效 





甫 和 如 果 不 使 用 CSS3 ， 是 不 可 能 的 。 作 为 Web 标 准 ，CSS3 已 经 像 HTML 一 样 ， 
成 为 了 制作 网 页 或 开发 Web 应 用 不 可 或 缺 的 一 个 部 分 。 不 论 是 布局 页 面 、 构 建交 互 按 
钮 和 菜单 ， 还 是 仅仅 美化 一 下 界面 ，CSS 都 是 最 基本 的 工具 。 事 实 上 ， 随 着 HTML 慢 慢 地 将 关注 
点 转向 内 容 和 语义 (参见 2.1 节 )，CSS 已 经 成 为 Web 设 计 的 灵魂 所 在 。 

作为 Web 设 计 的 核心 语言 ，CSS 变 得 日 益 庞 大 和 复杂 。 到 了 CSS 2.1 的 时 候 ，CSS 规 范 扩展 为 
最 初 的 $ 倍 ， 几 乎 达到 中 篇 小 说 的 篇 幅 。 好 在 ，CSS 的 设计 者 们 对 这 个 标准 有 着 合理 的 长 远 规 划 。 
他 们 把 下 一 代 CSS 拆 分 为 一 组 独立 的 标准 ， 每 个 独立 的 标准 叫做 模块 。 这 样 一 来 ,浏览 器 开发 商 
就 可 以 自主 决定 先 实 现 哪个 模块 ， 从 而 让 那些 令 人 向 往 的 部 分 尽早 得 到 应 用 。 而 且 , 浏览 器 开发 
商 确实 也 是 这 么 做 的 ， 要 么 实现 某 个 模块 ， 要 么 不 实现 。 所 有 新 的 CSS 模 块 归 总 起 来 叫做 CSS3 
(注意 ， 跟 HITML5 一 样 ， 字 母 与 数字 之 间 没 有 空格 )。 

CSS3 在 不 断 发 展 成 熟 的 过 程 中 出 现 大 约 $0 个 模块 。 这 些 模 块 涵盖 了 悦 人 眼目 的 功能 ( 比如 
丰富 的 字体 和 动画 )， 也 包括 更 具体 、 更 有 针对 性 的 内 容 ( 如 朗读 文本 和 根据 计算 机 或 移动 设备 
改变 样式 的 能 力 )。 总 之 ， 在 这 众多 的 模块 中 ， 有 些 已 经 得 到 当前 所 有 浏览 器 最 新 版 本 的 支持 ， 
而 有 些 则 只 是 尚未 得 到 任何 浏览 器 支持 的 试验 性 规范 。 

本 章 将 讨论 CSS3 最 重要 的 部 分 ( 也 是 被 支持 得 最 好 的 部 分 )。 先 看 一 看 怎么 使 用 字体 让 页 面 
文本 更 加 活 泌 然后 再 探讨 如 何 编写 样式 以 适应 不 同 大 小 的 浏览 器 窗口 和 不 同 的 上 网 设备 ( 如 
iPad 和 iPhone )。 接 下 来 ， 我 们 会 看 看 怎么 使 用 阴影 、 圆 角 和 其 他 手段 把 方 框 变 得 更 漂亮 。 最 后 ， 
再 讨论 一 下 怎么 使 用 渐变 创建 精妙 的 效果 , 在 鼠标 悬 停 、 单 击 或 切换 控件 时 ,， 给 出 优雅 的 视觉 提 
示 。( 结合 变换 和 透明 这 两 个 CSS3 功 能 可 以 把 上 述 效果 做 得 更 完美 。) 最 终 ， 我 们 将 学 习 如 何 用 
丰富 多 彩 的 网 络 字体 使 普通 文本 生动 起 来 。 

不 过 ， 在 着 手 尝试 这 些 激 动人 心 的 CSS3 功 能 之 前 ， 我 想 有 必要 先 考虑 下 ， 怎 样 才能 做 到 既 





























为 网 页 应 用 拉 风 的 特效 ， 同 时 又 不 会 把 一 部 分 用 户 抛 在 滚滚 风尘 中 。 
6.1 使 用 CSS3 





考 良 置疑， CSS3 是 Web 样 式 设计 的 未 来 , 但 它 还 没有 制定 完成 。 许 多 模块 都 在 修订 和 评审 当 
中 ， 没 有 一 款 浏 览 器 支持 全 部 模块 。 可 以 在 http:Wtinyurl.com/CSS3-stages 查 看 这 个 庞大 的 标准 家 
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族 当 前 的 状态 。 

因为 CSS3 还 在 微调 中 ， 所 以 它 与 HTML5S 一 样 ， 都 存在 兼容 性 问题 。 因 此 ， 每 一 位 网 站 开发 
者 都 要 自己 决定 使 用 什么 ， 不 使 用 什么 ， 以 及 如 何 做 好 不 同 用 户 体 验 之 间 的 衔接 工作 。 

在 打算 在 网 站 中 使 用 CSS3 之 前 ， 你 有 三 个 选择 。 下 面 我 就 一 一 分 析 给 你 听 。 




















注意 CSS3 不 是 HTML5 的 一 个 部 分 。 这 两 个 标准 是 独立 的 ， 制 定 它们 是 两 批 人 ， 时间、 地 点 也 
都 不 一 样 。 然而， 即 使 W3C 都 在 鼓励 开发 人 员 把 HTML5 和 CSS3 混 同 为 一 个 标准 ,希望 借 
此 推动 Web 的 新 一 波 发 展 浪 潮 。 不 相信 ? 看 看 W3C 的 HTML5 标 志 生 成 页 面 : 
http://www.w3.org/html/logo， 你 会 发 现 W3C 鼓 励 你 在 HTML5 的 标志 中 宣传 CSS3。 此 外 ， 
许多 基于 HTML5 的 现代 Web 设 计 ( 比如 我 们 将 在 下 一 章 学 习 的 适用 于 手机 的 布局 技术 ) 
都 有 一 个 显著 特征 一 一 需要 CSS3。 


6.1.1 选择 一 : 用 能 用 的 


如 果 某 个 功能 得 到 了 所 有 浏览 器 的 支持 , 自然 就 可 以 放心 使 用 ,Web 字体 就 是 这 样 的 功能 ( 参 
见 6.4 节 ) 你 大 可 以 选择 合适 的 字体 ， 这 些 字体 甚至 都 可 以 在 IE6 中 显示 。 可 惜 的 是 ， 这样 的 CSS3 
功能 实在 是 少 之 又 少 。 另 外 ， 单 词 自动 折 行 (word-wrap 属 性 ) 也 能 在 所 有 浏览 器 中 使 用 ， 而 稍 
作 处 理 就 可 以 在 老 版 本 浏览 器 中 实现 透明 效果 。 可 是, 除了 这 些 之 外 ,几乎 所 有 功能 对 现在 依然 
流行 的 正 8 而 言 都 是 不 兼容 的 。 



































注意 “除非 特意 说 明 ， 本 章 所 有 CSS3 功 能 都 可 以 在 目前 最 新 版 本 的 浏览 器 中 使 用 ， 和 包括 IE， 如 
果 你 用 的 是 IE9 及 其 更 新 版 本 的 话 ， 但 不 包括 其 他 老 版 本 的 IE。 


6.1.2 选择 二 : 将 CSS 功 能 作为 增强 


CSS3 粉 丝 们 虹口 同 声 地 说 :“ 网 站 没有 必要 在 所 有 浏览 带 中 都 长 得 一 模 一 样 。” 当然 没 错 。 
(他 们 还 为 此 建 了 一 个 单 页 网 站 呢 : http:/DoWebsitesNeedToBeExperiencedExactlyTheSameInEvery 
Browsercomy/, 它 针 对 现代 浏览 器 做 了 一 些 装饰 ,但 对 像 IE7 这 样 落后 的 浏览 器 只 保留 了 基本 功能 。) 

这 个 选择 的 中 心思 想 ， 就 是 利用 CSS3 来 添加 装饰 ， 即 使 用 户 的 浏览 器 不 支持 也 无 伤 大 雅 。 
比如 说 border-radius 属 性 吧 ， 可 以 用 它 生成 浮动 的 圆 角 框 : 

header { 

background-color: #7695FE; 
border: thin #336699 solid; 
padding: 10px; 

margin: 10px; 

text-align: center; 
border-radius: 25px; 
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支持 porder-radius 属 性 的 浏览 器 知道 该 怎么 做 。 而 老 版 本 浏览 器 则 会 名 略 这 条 声明 ， 仍 然 
呈现 方 角 框 (图 6-1 )。 








图 6-1: 在 IE9 中 ， 标 题 框 有 
How the World Could End 到 角 (上 )。 a 
border-radius 属 性 ， 只 应 用 
其 他 的 样式 声明 (下 ) 

















How the World Could End 














这 种 向 后 兼容 让 设计 师 可 以 在 支持 最 新 版 CSS 的 浏览 器 上 使 用 最 新 潮 的 设计 效果 ,而 在 旧版 
浏览 器 上 网 站 也 不 会 被 破坏 。 不 过 ， 如 果 你 在 这 条 路 上 走 得 太 远 恐 怕 还 是 有 问题 。 一 个 网 站 ,不 
管 它 在 最 新 版 本 的 浏览 器 中 看 起 来 有 多 好 ,只 要 有 一 部 分 用 户 在 用 旧 浏 览 器 , 而 且 在 他 们 的 浏览 
器 中 看 不 出 你 的 网 站 有 什么 特别 , 那 你 的 投入 产 出 就 要 大 打折 扣 。 毕 竞 , 谁 都 希望 自己 的 网 站 能 
吸引 所 有 人 ， 而 不 只 是 那些 拥有 最 新 浏览 需 的 极 客 。 

考虑 到 这 一 点 ， 在 使 用 某 些 CSS3 功 能 增强 网 页 时 ， 不 得 不 多 加 小 心 。 换 名 话说 ， 应 该 只 使 
用 那些 已 经 得 到 大 多 数 浏览 器 ( 即便 是 需要 最 新 版 ) 支持 的 功能 。 不 要 让 自己 的 网 站 在 不 同 浏 览 
器 中 的 体验 差别 过 大 ， 以 免 强 迫 部 分 用 户 受到 “ 低 一 等 ”的 待遇 。 


提示 “一 说 到 CSS3 ， 正 总 是 那个 “掉队 ”的 家 伙 。 少 数 激进 的 Web 设 计 师 其 至 主张 应 该 把 像 IE8 
这 种 落后 的 浏览 器 “ 打 入 冷 宫 "， 只 要 其 他 浏览 器 支持 某 个 CSS3 功 能 ， 就 可 以 使 用 ， 而 
不 必 考 虑 JE。 否则， 又 有 谁 能 给 微软 施 压 ， 让 Web 发 展 得 越 来 越 好 呢 ? 从 理论 上 讲 ， 这样 
做 没有 问题 ， 但 仅 限于 你 的 网 站 本 身 致力 于 推广 先进 的 Web 标 准 。 如 果 不 是 的 话 ， 那 么 
拒绝 一 大 部 分 用 户 的 结果 只 能 适得其反 。 道 理 很 简单 ， 你 可 以 不 喜欢 别人 的 浏览 器 ， 但 
别人 却 会 用 自己 的 浏览 器 来 浏览 你 的 工作 成 果 。 


6.1.3 选择 三 : Modernizr 

如 果 你 使 用 了 某 个 未 得 到 全 面 支持 的 CSS3 功 能 ， 同 时 不 支持 该 功能 的 浏览 器 也 能 给 出 不 错 
的 呈现 效果 ， 那 当然 再 好 不 过 了 。 可 是 ， 有 时 候 这 样 做 会 导致 网 站 中 某 个 关键 的 区 块 消失 不 见 ， 
或 者 其 降级 的 版 本 看 起 来 丑陋 不 堪 。 比 如 ， 图 6-2 展 示 了 只 有 Firefox 支 持 的 多 色 边 框 。 
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图 6-2: 在 Firefox 中 , 多 色 边 框 看 起 
Dig this multicolored border on Firefox. 
来 赏心悦目 ( 上 ) 。 但 在 Chrome 


中 , 我 们 只 能 看 到 傻 粗 傻 粗 的 纯 黑 


色 边 框 (下 ) ， 这 怎么 说 也 不 能 叫 
好 看 

对 这 种 问题 ， 有 时 候 可 以 通过 按 正确 的 顺序 排列 属性 声明 来 解决 。 换 句 话 说， 就 是 先 列 出 兼 

容 性 最 好 的 属性 ， 然 后 再 列 出 新 属性 ， 以 履 盖 之 前 的 属性 。 这 种 方式 如 果 有 效 ， 那 么 就 可 以 适应 

所 有 浏览 需 。 因 为 老 版 本 浏览 需 会 采用 标准 的 属性 ， 而 新 浏览 锅 则 会 用 新 属性 覆盖 标准 的 属性 。 
举 个 例子 吧 ， 可 以 利用 属性 覆盖 技术 实现 用 渐变 背景 代替 实 色 背景 : 


.stylishBox { 
























































background: yellow; 
background: radial-gradient(ellipse, red, yellow); 


} 
图 6-3 展 示 了 结果 。 

















图 6-3: 上 : 在 不 支持 CSS3 的 浏览 器 中 ， 这 个 类 名 
If you see a yellow backsround， 为 stylisBox 的 元 素 只 有 黄色 背景 下: 在 支持 CSS3 
bn ri hs 的 浏览 器 中 ,黄色 背景 会 被 由 红 到 黄 的 放射 性 渐变 
取代 


If you see a radial gradient, you're 
rocking it, HTMLS style. 














在 某 些 情况 下 ， 窗 盖 样式 属性 也 不 能 奏效 ， 因 为 需要 以 组 合 的 方式 来 设置 属性 。 图 6-2 所 示 
的 多 色 边 框 就 是 一 个 例子 。 设 置 这 个 多 色 效 果 要 使 用 border-colors 属 性 ， 但 看 起 来 就 好 像 是 只 
通过 border-thickness 属 性 把 边框 加 粗 了 一 样 。 在 不 支持 多 色 边 框 的 浏览 器 中 ， 那 个 俊 粗 傻 粗 的 
边框 怎么 看 怎么 难看 ， 不 管 它 是 什么 颜色 。 
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要 解决 这 个 问题 ， 可 以 使 用 Modernizr， 也 就 是 1.6.7 节 介绍 的 那个 用 于 测试 HTML5 功 能 支持 
的 JavaScript 库 。 使 用 Modernizr 可 以 为 不 支持 某 个 样式 属性 的 浏览 器 设置 替代 的 样式 。 例 如 ， 假 
设 要 创建 图 6-1 所 示 的 两 种 标题 框 。 在 支持 的 浏览 器 中 ， 你 想 要 圆 角 边框 ， 而 在 不 支持 的 浏览 器 
中 ， 你 想 使 用 双 线 边框 。 此 时 ， 如 果 你 在 页 面 中 引用 了 Modermizr 脚 本 ， 那 么 可 以 像 下 面 这 样 写 
出 组 合 的 样式 规则 : 


/* 为 所 有 标题 设置 样式 ， 无论 浏览 器 是 否 支 持 CSS53*/ 
header { 

background-color: #7695FE; 

padding: 10px; 

margin: 10px; 

text-align: center; 


} 


/* 为 支持 border-radius 属 性 的 浏览 器 设置 样式 */ 
.borderradius header { 
border: thin #336699 solid; 
border-radius: 25px; 


} 


/* 为 不 支持 border-radius 属 性 的 浏览 器 设置 样式 */ 
.no-borderradius header { 
border: 5px #336699 double; 




















这 个 办 法 不 错 啊 ， 那 两 个 类 是 什么 意思 呢 ? 在 页 面 中 使 用 Modernizr 时 ， 需 要 给 页 面 的 根 元 
素 <htm1> 添 加 class="no-js" 属 性 : 

<html class="no-js"> 

然而 ， 在 页 面 加载 完 Modernizr 后 ， 它 会 迅速 检测 一 批 HTML5 、JavaScript 和 CSS3 功 能 的 支持 
情况 。 然 后 , 为 chtml> 元 素 应 用 一 大 堆 类 , 每 个 类 名 用 空格 隔 开 , 把 其 class 属 性 修改 成 如 下 所 示 : 


<html class="js flexbox canvas canvastext webgl] no-touch geolocation 
postmessage no-websqldatabase indexeddb hashchange history draganddrop 
no-websockets rgba hsla multiplebgs backgroundsize borderimage borderradius 
boxshadow textshadow opacity no-cssanimations csscolumns cssgradients 
no-cssreflections csstransforms no-csstransforms3d csstransitions fontface 
generatedcontent video audio localstorage sessionstorage webworkers 
applicationcache svg inlinesvg smil svgclippaths"> 


如 果 这 里 列 出 的 类 名 中 包含 某 个 功能 , 说 明 浏 览 器 支持 该 功能 。 如 果 表 示 相 应 功能 的 类 名 前 
缀 为 “no-”， 那 说 明 浏 览 咒 不 支持 该 功能 。 以 上 面 的 代码 为 例 ， 说 明 浏 览 器 支持 JavaScript ( js )， 
但 不 支持 Web 套 接 字 ( no-websockets )。 至 于 CSS3 ， 说 明 浏 览 器 支持 porder-radius 属 性 
( borderradius )， 但 不 支持 CSS3 倒 影 ( no-cssreflections )。 

在 自己 的 选择 符 中 使 用 这 些 类 名 ， 就 可 以 基于 浏览 器 的 支持 情况 分 别 设 置 样式 。 比 如 ,使 用 
选择 符 .borderradius header 能 够 取得 所 有 包含 在 这 个 <htm1> 元 素 中 的 <header> 元 素 一 一 当然 , 浏 
览 器 必须 得 支持 border-radius 属 性 。 要 不 然 ， 束 不 会 出 现 .borderradius 类 ， 而 这 个 选择 符 也 就 
不 会 选择 任何 元 素 ， 对 应 的 规则 也 会 被 忽略 。 
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使 用 Modernizr 也 有 一 个 问题 ， 那 就 是 它 只 会 检测 一 部 分 CSS3 功 能 。 这 部 分 功能 都 是 最 流行 
也 最 成 熟 的 CSS3 功 能 ， 其 中 并 不 包括 图 6-2 所 示 的 border-color 功 能 ， 因 为 相应 的 属性 还 只 有 
Firefox 自 己 支持 。 为 此 ， 最 好 还 是 不 要 在 自己 的 网 页 中 使 用 多 色 边 框 ， 至 少 现在 不 行 。 























注意 利用 Modernizr 也 可 以 编写 作为 后 备 ( 向 后 兼容 ) 的 JavaScript 脚 本 。 编 写 脚 本 时 ， 只 要 像 
检测 HTML5 功 能 一 样 ， 检 测 Modernizr 对 象 中 的 特定 属性 即 可 。 在 浏览 器 不 支持 的 高 级 
CSS3 功 能 太 多 ( 比如 不 支持 渐变 和 动画 ) 的 情况 下 ， 也 可 以 用 编写 脚本 的 方式 来 弥补 。 
不 过 ， 这 样 一 来 工作 量 可 就 大 了 ， 而 且 实现 方式 也 完全 不 同 。 所 以 对 于 一 些 必 不 可 少 的 
网 站 功能 ， 最 好 只 通过 JavaScript 来 实现 。 


6.1.4 ”有 开发 商 前 缀 的 特定 于 浏览 器 的 样式 


制定 CSS 标 准 的 人 在 引入 新 功能 时 ， 经 常会 遭遇 “和 蛋 和 鸡 ” 的 困 局 。 为 了 让 一 项 功能 毕 于 完 
美 ， 他 们 需要 听 到 浏览 器 开发 商 和 Web 设 计 人 员 的 反馈 。 但 是 ， 为 了 得 到 这 些 反 馈 ， 必 须 先 让 浏 
览 器 开发 商 和 Web 设 计 人 员 实 现 还 不 够 完美 的 功能 。 这 样 就 会 形成 一 个 试验 和 反馈 循环 ， 经 过 反 
复 多 次 修订 ,最终 定案 。 在 此 期 间 ， 无 论 是 功能 的 语法 还 是 实现 ， 都 会 发 生变 化 。 于 是 不 可 避免 
地 会 导致 非常 现实 的 风险 : 某 些 Web 设 计 人 员 会 学 习 这 些 新 功能 ， 然 后 将 其 用 在 自己 的 网 站 中 ， 
而 将 来 标准 万 一 有 变化 ， 就 可 能 导致 网 站 无 法 使 用 。 

为 了 避免 这 种 风险 ,浏览 器 开 发 商 使 用 了 一 种 叫做 开发 商 前 组 (vendor prefix ) 的 办 法 ， 即 
为 还 在 开发 中 的 CSS 属 性 和 功能 加 上 特定 浏览 器 实现 的 前 级。 比如 6.2.5 节 将 要 介绍 的 还 在 开发 过 
程 中 的 radial-gradient() 函 数 。 在 旧版 的 Firefox 中 还 没有 radial-gradient() 函 数 , 但 是 可 以 使 用 
名 为 -moz-radial- gradient 的 方法 。 


.StylishBox { 
background: yellow; 
background: -moz-radial-gradient(ellipse, red, yellow); 


} 

Firefox 所 使 用 的 开发 商 前 缀 是 -moz- (开发 Firefox 的 组 织 Mozilla 的 缩写 )。 每 个 浏览 器 引擎 都 
有 自己 的 开发 商 前 缀 ( 见 表 6-1 )。 虽然 看 起 来 是 人 为 制造 了 不 少 麻 烦 , 但 这 样 还 是 有 其 合理 性 的 。 
首先 ， 不 同 浏览 器 开发 商 不 会 同时 支持 某 项 功能 ， 而 且 经 常会 实现 同一 规范 的 不 同 版 本 。 其 次 ， 
尽管 大 家 将 来 都 要 支持 最 终 规范 规定 的 同样 的 语法 , 但 特定 于 浏览 器 的 属性 和 功能 则 不 一 定 相同 。 


表 6-1 开发 商 前 组 
















































































前 组 浏 览 器 

-moZ- Firefox 

-webkit- Chrome、Safari 和 最 新 版 的 Opera (3 个 浏览 器 的 引擎 都 是 WebKit) 
-ms- Internet Explorer 

-0- 旧版 的 Opera (15 之 前 ) 
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下 面 这 个 例子 用 了 全 部 4 个 浏览 锅 特 定 前 绥 实 现 放射 性 渐变 : 


.StylishBox { 
background: yellow; 
background-image: -moz-radial-gradient(circle, green, yellow); 
background-image: -webkit-radial-gradient(circle, green, yellow); 
background-image: -0o-radial-gradient(circle, green, yellow); 
background-image: -ms-radial-gradient(circle, green, yellow); 


} 

显然 ， 在 处 理 这 些 不 太 成 熟 的 CSS3 时 ， 需 要 一 些 “ 浮 肿 ” 的 样式 规则 。 

一 个 明显 的 问题 摆 在 每 个 Web 设 计 人 员 面 前 :“ 什 么 时 候 需 要 用 开发 商 前 级 ?什么 时 候 使 用 
普通 的 、 没 有 前 级 的 属性 或 方法 名 是 安全 的 ? ”可 能 你 会 考虑 给 浏览 絮 做 一 个 快速 测试 ， 但 除 
非 你 在 每 个 浏览 器 上 都 进行 测试 ， 否 则 无 法 得 到 确定 性 的 结论 。 比 如 ， 所 有 浏览 器 都 支持 
borderadius 属 性 , 不 需要 开发 商 前 级 。 但 是 radial-gradient() 却 有 点 环 手 : 在 写 这 本 书 的 时 候 ， 
大 部 分 浏览 器 都 支持 ， 但 一 些 移动 浏览 器 仍然 需要 -webkit- 前 级 。 还 有 我 们 将 在 本 章 后 面 用 到 
的 transform 属 性 ， 于 和 Firefox 浏 览 器 不 需要 前 级 ,但 Chrome 、Safari 和 Opera 仍 然 需要 -webkit- 
前 级 。 

更 麻烦 的 是 ， 用 于 指定 一 个 属性 值 或 方法 参数 的 语法 可 能 会 变 。 比 如 ,IE10 在 测试 阶段 引入 
了 有 前 组 的 radial-gradient() 函 数 。 最 终 ，IE10 的 发 布 版 让 开发 者 既 可 以 用 最 新 的 无 前 绥 
radial-gradient() 也 数 , 又 可 以 用 稍 旧 一 点 的 有 前 级 的 -ms-radial-gradient() 消 数 。 这 种 设置 着 
实 增加 了 无 尽 的 排 错 乐趣 ， 呵 呵 ! 












































注意 在 本 章 中 ,我 们 将 了 解 到 所 有 涉及 的 CSS3 部 分 当前 的 支持 情况 ， 包 括 哪些 需要 开发 商 前 
级 。 如 果 本 章 例 子 中 的 样式 没有 使 用 开发 商 前 级 ， 可 以 认为 在 页 面 中 使 用 这 些 特性 时 ， 
省 略 前 级 是 安全 的 。 


如 果 现 在 开始 头疼 了 ， 别 担心 ， 你 很 容易 获取 帮助 。 要 获取 关于 哪些 CSS3 特 性 需要 开发 商 
前 绥 的 最 新 信息 ， 可 以 求助 于 不 可 或 缺 的 网 站 http:/caniuse.com ( 我 们 第 一 次 在 1.6.1 节 中 见 过 )。 
当 查 找 一 个 CSS3 特 性 时 , “Can I use...” 网 站 会 清楚 地 指出 哪个 版 本 的 浏览 器 需要 开发 商 前 级 
(图 6-4 )。 
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前 组 需要 前 级 Opera 需 要 -webkit- 
六 乡 前 组 
注意 使 用 开发 商 前 级 的 确 是 够 乱 的 。Web 开 发 人 员 也 因此 分 成 两 个 阵营 ， 一 个 阵营 认为 要 想 
用 上 最 新 最 酷 的 功能 ， 这 是 无 论 如 何 也 无 法 避免 的 。 另 一 个 阵营 则 认为， 那么 多 浏览 器 


前 绥 只 会 让 头脑 清楚 的 开发 人 员 对 这 些 功能 数 而 远 之 。 但 有 一 条 是 肯定 的 : 如 果 不 使 用 
开发 商 前 级 ， 相 当 一 部 分 CSS3 功 能 都 将 无 法 使 用 。 


6.2 ”多 变 的 盒子 


从 CSS 诞 和 后 之 初 ，Web 设 计 人 员 





就 用 它 来 创建 内 容 盒子 。 随 着 CSS 的 功能 越 来 越 























高 ， 盒 子 





的 形式 也 越 来 越 吸 引 人 ， 能 够 用 它 实 现 带 阴影 的 标题 、 浮 动 的 标题 插图 等 很 多 有 用 的 元 素 。 而 当 
CSS 解 决 了 悬 停 的 问题 之 后 ， 浮 动 盒子 甚至 变 身 成 了 多 种 多 样 、 流 光 溢 彩 的 按钮 ,一 举 取 代 了 过 
去 笨拙 的 JavaScript 手 段 。 了 解 了 这 些 之 后 ， 再 运用 最 受 欢 迎 也 最 受 支持 的 CSS3 功 能 做 出 更 漂亮 
的 盒子 一 一 无 论 用 于 包含 什么 内 容 ， 也 就 不 足 为 奇 了 。 
自动 添加 开发 商 前 组 
如 果 你 大 量 地 使 用 需要 开发 商 前 级 的 CSS3 特性 , 很 快 就 会 疲 于 更 新 大 量 的 样式 和 一 遍 一 


遍地 给 同一 个 样式 添加 多 个 版 本 。 
-prefix-free。 


在 你 前 溃 之 前 ， 不 妨 考虑 一 


下 和 神奇 卓越 的 JavaScript 工具 


要 使 用 -prefix-free， 只 需 用 你 需要 的 CSS3 属性 创建 一 个 普通 


的 样式 ， 而 不 需 担 心 开 发 





商 前 级 问题 。 然 后 ， 在 页 面 中 引用 -prefix-free 脚本 。 
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当 用 户 浏览 页 面 时 ，-prefix-free 脚本 就 开始 发 挥 作 用 。 它 会 检测 当前 浏览 器 并 自动 添加 
浏览 器 所 需 的 所 有 开发 商 前 级 。( 没 错 ， 这 种 自动 调整 会 耗费 一 点 额外 的 时 间 ， 但 它 非 常 快 以 
至 于 基本 看 不 出 来 。) 当然 ，-prefix-free 不 是 让 浏览 器 支持 它 本 就 不 支持 的 特性 ， 而 是 将 普 
通 的 、 明 确 命名 的 属性 转变 成 一 些 浏览 器 需要 的 散乱 的 、 开 发 商 特定 的 命名 ， 以 支持 新 的 和 发 
展 中 的 特性 。 对 许多 开发 者 来 说 ， 添 加 一 个 JavaScript 文件 来 处 理 CSS3 前 缓 的 混乱 ， 这 个 代 
价 还 是 比较 小 的 。 


要 下 载 -prefix-free 库 ,或 者 要 试 一 下 脚本 添加 CSS 前 缀 的 能 力 ， 可 以 访问 http://leaverou. 
github.io/prefixfree。 


6.2.1 透明 


生成 部 分 透明 的 图 片 和 颜色 是 CSS3 的 一 个 基本 功能 。 实 现 透 明 效 果 的 方法 有 两 种 。 

第 一 种 是 使 用 rgba() 函 数 ， 它 接收 4 个 数值 作为 参数 。 前 三 个 值 分 别 代表 色彩 中 的 红 、 绿 、 
蓝 分 量 ， 取 值 范围 为 0 一 255。 最 后 一 个 值 是 alpha( 不 透明 度 ) 值 ， 取 值 范围 为 0 一 1; 0 表示 完全 
透明 ，1 表 示 完 全 不 透明 。 

下 面 这 个 例子 会 创建 一 个 半 透 明 的 黄 绿色 背景 : 

.SemitransparentBox { 


background: rgba(170,240,0,0.5); 


3} 
不 支持 fgba() 函 数 的 浏览 器 会 忽略 这 条 规则 , 而 相应 的 元 素 会 带 有 默认 不 透明 的 背景 。 当然 ， 
更 好 的 做 法 是 先 声明 一 个 实心 的 后 备 颜 色 ， 然 后 再 用 半 透 明 颜色 覆盖 它 : 
.SemitransparentBox { 
background: rgb(170,240,0); 
background: rgba(170,240,0,0.5); 


} 
这 样 ， 即 使 浏览 器 不 支持 rgba() 函 数 ， 也 会 应 用 指定 的 背景 颜色 ， 只 不 过 完全 不 透明 而 已 。 


























提示 “为 了 保证 后 备 背 景 的 效果 ， 尽 量 选 择 一 种 与 半 透 明 效果 接 近 的 颜色 。 比 如 ， 前 面 例子 中 
用 的 是 半 透 明 的 黄 绿色 ， 而 下 方 元 素 的 背景 则 是 白色 。 由 于 白色 会 送出 那些 半 透 明 的 像 
素 ， 结 果 就 会 显得 比较 亮 。 在 选择 后 备 颜 色 时 ， 应 该 尽量 选择 一 个 接近 的 亮色 。 





另外 ，CSS3 还 新 增 了 一 个 名 为 opacity 的 属性 ， 这 个 属性 的 原理 与 alpha 值 一 样 ( opacity 这 
个 单词 的 意思 就 是 “不 透明 ” ) 取 值 范围 为 0 一 1; 0 表示 完全 透明 ，1 表 示 完 全 不 透明 : 
.SemitransparentBox { 


background: rgb(170,240,0); 
opacity: 0.5; 








图 6-$ 展 示 了 两 个 半 透 明 的 例子 ， 一 个 使 用 rgba() 函 数 ， 另 一 个 使 用 opacity 属 性 
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The background shows through this box, partially. 
However, the text and border are opaque. 
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图 6-5: 这 个 页 面 展 示 了 实现 半 透 明 效 果 的 两 种 方 





式 : 淡化 图 片 ( 
盒子 ( 使 用 rgba 





使 用 opacity 属 性 ) 和 让 背景 透 过 
() 函 数 创 建 半 透 明 的 背景 色 ) 

















6.2.2 


J mm /3 


区 正 母 一 
另 一 个 是 垂直 半径 。 


在 下 列 情况 下 ， 建 议 使 用 opacity 属 性 而 不 是 rgba() 函 数 。 


边框 颜色 也 会 变 透 明 。 


设置 半 透 明 效果 )。 
口 实现 图 片 的 半 透 明 效果 。 





圆 角 











口 实现 多 种 颜色 ( 元 素 ) 的 半 透 明 效 果 。 使 用 opacity 属 性 ， 


不 仅 背 景 颜色 ， 就 连 文本 颜色 、 


口 在 不 知道 颜色 的 情况 下 ， 实 现 半 透 明 效果 ( 比如 ， 通 过 其 他 样式 表 或 者 JavaScript 代 码 来 


口 实现 渐变 动画 效果 时 ， 比 如 元 素 的 淡 入 淡出 ( 参见 6.3.3 节 )。 


还 记得 border-radius 属 性 吗 ? 这 个 属性 可 以 帮 我 们 把 盒子 的 方 角 刊 得 圆滑 一 些 ， 这 一 点 我 























们 介绍 过 了 。 但 我 们 没有 介绍 的 是 ， 如 何 利 用 这 个 属性 做 出 曲线 来 。 





首先 ， 可 以 为 border-radius 属 性 选择 不 同 的 值 ， 因 为 这 里 的 radius (半径 ) 指 的 是 圆 角 的 半 

















.roundedBox { 
background: yellow; 
border-radius: 25px 50px 25px 85px; 


} 











径 。( 最 终结 果 不 会 显示 一 个 完整 的 圆 ， 只 有 水 平 线 和 垂直 线 这 两 条 切线 以 及 部 分 圆 跌 。) 半径 值 
越 大 , 圆 弧 越 长 ,， 圆 角 就 越 平 滑 。 与 CSS 中 的 其 他 属性 类 似 , 这 个 
包括 像素 和 百分比 。 还 可 以 提供 4 个 值 ， 分 别 对 应 4 个 圆 角 : 





属性 的 值 也 可 以 使 用 多 种 单位 ， 


不 仅 如 此 ,还 可 以 把 圆 拉 促成 椭 贺 ， 即 让 某 一 个 轴 向 的 圆 弧 更 长 。 要 实现 这 个 效果 ,就 要 单 








.roundedBox { 
background: yellow; 
border-top-left-radius: 150px 30px; 


个 角 ( 使 用 border-top-left-radius 这 样 的 








属性 ), 然后 提供 两 个 值 : 一 个 是 水 平 半径 ， 
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border-top-right-radius: 150px 30px; 


} 
图 6-6 展 示 了 一 些 例 子 。 























am Ee 和 图 6-6: 动 动脑 子 , 利用 border-radius 属 性 可 以 创建 出 形状 各 异 
| 大 Rounded ER [| 盒子 














Round the top-right corner: 


border-top-right-radius: 50px; 


| Stretch it out one way... 
border-top-right-radius: 150px SOpx; 









Or go crazy with every corner to 
make a deformed box: 
border-top-left-radius: 150px 30px; 
border-top-right-radius: 100px 50px; 
border-bottom-left-radius: 40px 90px; 
border-bottom-right-radius: 20px 75px; 














| 100% ~ 


























6.2.3 ”背景 


过 去 ， 要 想 设计 出 带 新 奇 背景 和 边框 的 盒子 ， 一 般 都 要 求助 于 图 片 。CSS3 为 简化 这 个 任务 
引入 了 两 个 新 功能 。 首先 , 就 是 支持 多 背景 , 即 让 你 能 在 一 个 元 素 上 应 用 两 个 甚至 更 多 背景 图 片 。 
下 面 这 个 例子 就 为 一 个 盒子 的 左上 和 右 下 分 别 应 用 了 背景 : 

.decoratedBox { 

margin: 50px; 

padding: 20px; 

background-image: url('top-left.png'), url('bottom-right.png'); 
background-position: left top, right bottom; 

background-repeat: no-repeat, no-repeat; 

} 

第 一 步 是 设 定 任何 数量 的 图 片 ， 使 用 的 还 是 background-image 属 性 。 然 后 ， 再 设置 每 张 图 片 
的 位 置 并 控制 它们 是 否 重复 , 分 别 使 用 background-position 和 background-repeat 属 性 。 这 里 关键 
是 这 三 个 属性 值 的 顺序 要 匹配 。 换 句 话说, 第 一 张 图 片 的 位 置 由 background-position 属 性 的 第 一 
个 值 决 定 ， 第 二 张 图 片 的 位 置 由 background-position 属 性 的 第 二 个 值 决定 ， 以 此 类 推 。 图 6-7 显 
示 了 这 个 例子 的 结 
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pa rr 一 图 6-7: 无 论 盒子 有 多 大 多 没有 关系 ， 背 景 图 片 
始终 都 会 靠 在 角 上 
























two background images, which are 
n its top-left and bottom-right corners. 


| You can see the difference when you resize the page, 
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注意 ”如 果 浏 览 器 不 支持 多 背景 ， 那 么 它 会 完全 忽略 这 些 背 景 属性 。 为 避免 全 有 全 无 的 
最 好 还 是 先 用 background 或 background-image 属 性 设置 一 个 后 备 的 背景 关 色 或 图 片 。 
再 继续 用 background-image 设 置 多 张 图 片 。 


下 面 这 个 例子 对 前 面 的 例子 稍微 做 了 一 点 改进 , 就 实现 了 原来 极 费时 间 的 滑动 门 技术 。 同 样 ， 
还 是 使 用 了 三 张 图片 : 一 张 在 左 端 ， 一 张 在 右 端 ， 还 是 一 张 窗 罕 的 在 中 间 : 


.decoratedBox { 
margin: 50px; 
padding: 20px; 
background-image: url('left.png'), url('middle.png'), url('right.png'); 
background-position: left top, left top, right bottom; 
background-repeat: no-repeat, repeat-x, no-repeat; 





这 样 ， 就 利用 多 背景 创建 了 一 个 可 以 自由 缩放 的 按钮 。 当 然 ， 既然 CSS3 还 提供 了 更 多 功能 ， 
那么 为 按钮 加 上 阴影 、 渐 变 和 其 他 不 依赖 图 片 的 效果 可 能 更 有 吸引 力 。 


6.2.4 阴影 
CSS3 定 义 了 两 种 阴影 : 盒子 阴影 和 文本 阴影 。 这 两 者 中 ,盒子 阴影 更 有 用 。 比 如 ， 可 以 为 
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<div> 元 素 添加 一 个 矩形 的 阴影 (同时 也 要 设置 边框 ， 这 样 就 仍然 有 盒子 的 感觉 )。 另外， 阴影 还 
可 以 随 着 盒子 的 形状 而 变化 〈 见 图 6-8 )。 





























= | 加 图 6-8， 阴影 可 以 让 文本 显得 浮 起 来 ( 上 ) 、 让 盒子 突 
ee 这 出 显示 ( 中 ) 、 让 按钮 产生 发 光 效果 ( 下 ) 
| 所 CQ Shadows.html aa 
Shadowed Text. 





| This shadow follows the rounded edge of a | 
” <div>. 


Fake Button 






































生成 这 两 种 阴影 的 属性 分 别 是 box-shadow 和 text-shadow。 下 面 是 创建 盒子 阴影 的 一 个 简单 
示例 : 


.ShadowedBox { 
border: thin #336699 solid; 
border-radius: 25px; 
box-shadow: 5px Spx 10px gray; 


} 

前 两 个 值 是 水 平和 垂直 方向 的 偏 移 量 。 如 果 是 正 值 ( 像 这 里 两 个 值 者 是 5 像素 ) 那么 阴影 就 
会 向 右 疝 下 偏 移 。 接 下 来 设置 模糊 距离 一 一 这 个 例子 中 是 10 像 素 一 一 这 增加 了 阴影 的 模糊 程度 。 
最 后 一 个 值 是 阴影 颜色 。 假 如 盒子 底下 有 内 容 的 话 ， 可 以 考虑 在 这 个 值 的 位 置 上 使 用 rgba() 函 数 
(参见 6.2.1 )， 从 而 将 阴影 颜色 设置 为 半 透 明 的 。 

假如 你 还 想 再 调整 一 下 阴影 ， 还 有 两 个 地 方 可 以 下 手 。 第 一 个 地 方 就 是 在 模糊 值 与 颜色 值 
之 间 ， 在 这 个 地 方 加 一 个 值 ， 用 于 设置 阴 虹 彤 伸展 范围 ( spread )， 即 增 大 模糊 边界 之 前 的 实心 颜 
色 面 积 : 

box-shadow: 5px 5px 10px 5px gray; 

第 二 个 地 方 就 是 值 列表 的 末尾 ， 可 以 在 最 后 加 上 单词 inset ， 这 样 就 可 以 在 元 素 内 部 〈 而 不 
是 外 部 ) 创建 一 个 阴影 。 在 不 设置 水 平和 垂直 偏 移 值 的 情况 下 这 个 效果 是 最 好 的 : 

box-shadow: Opx Opx 20px lime inset; 

这 行 代码 得 到 的 就 是 图 6-8 下 面 的 那个 按钮 效果 。6.3.1 节 将 介绍 为 按钮 添加 甚 停 时 的 内 阴影 


效果 。 
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注意 我 们 甚至 可 以 为 一 个 元 素 添 加 多 个 阴影 ， 只 要 把 每 个 阴影 的 值 列 表 用 过 号 分 隔 开 即 可 。 
但 这 种 阴影 控 通 常 是 在 浪费 时 间 和 电能 。 


类 似 地 ，text-shadow 属 性 也 需要 一 个 值 列表 ,但 值 的 顺序 有 所 不 同 。 首 先 要 指定 颜色 值 ， 
然后 才 是 水 平和 垂直 偏 移 值 ， 最 后 是 模糊 值 : 
.textShadow { 
font-size: 30px; 
font-weight: bold; 
text-shadow: gray 10px 10px 7px; 


} 
是 4 EE 


旧版 了 正 浏 览 器 不 支持 盒子 阴影 和 文本 阴影 。 盒 子 阴影 需要 IE9 及 其 更 新 版 本 ， 而 文本 阴影 需 
要 IE10 及 其 更 新 版 本 。 








6.2.5 渐变 


渐变 是 多 种 颜色 混合 而 成 的 效果 ,可 以 用 来 创建 菜单 栏 后 面 精细 的 底 纹 , 或 者 五 彩 斑 凋 的 按 
钮 ( 就 像 20 世 纪 60 年 代 复活 节 晚 会 上 的 彩 灯 )。 图 6-9 展 示 了 几 个 例子 。 








nas = 三 虹 司 。 图 6-9: 本 质 上 , 渐变 就 是 两 种 或 

CG Q Gradients.html = 更 多 种 颜色 的 混合 。 但 就 是 这 么 
si 简单 的 拼合 ， 却 可 以 创造 出 光 怪 
陆 离 的 效果 




















This linear gradient goes from corner to corner. Light colors make for a subtle effect. 
background: linear-gradient(from top left, white, lightblue) 


























注意 很 多 网 页 中 的 渐变 其 实 都 是 用 背景 图 片 来 伪造 的 。CSS3 可 以 让 我 们 自己 来 定义 渐变 ， 然 
后 浏览 器 就 会 负责 呈现 。CSS3 渐 变 的 优点 是 可 以 让 浏览 器 少 下 载 图 片 ， 而 且 这 种 渐变 能 


够 无 颖 地 适应 各 种 大 小 的 空间 。 


CSS3 支 持 两 种 渐变 : 线性 渐变 和 放射 性 渐变 。 线 性 渐变 就 是 治 直线 混合 几 种 颜色 ， 而 放射 
性 渐变 则 是 在 圆心 到 圆周 之 间 混 合 颜色 。 
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CSS3 并 没 能 给 创建 渐变 提供 任何 属性 。 要 创建 渐变 ， 必 须 使 用 渐变 函数 来 设置 background 
属性 。 提 个 醒 儿 ， 考 虑 到 有 的 浏览 锅 〈 比如 IE10 之 前 的 版 本 ) 可 能 不 支持 渐变 ， 千 万 别 忘 了 先 写 
一 条 background 声 明 ， 为 该 属性 指定 一 个 实心 颜色 作为 后 备 。 

1. 线性 渐变 

有 4 个 渐变 函数 ， 第 一 个 函数 是 linear-gradient()。 下 面 的 代码 展示 了 使 用 这 个 函数 的 简单 
形式 ， 这 样 会 创建 一 个 从 上 到 下 ， 从 白 到 蓝 的 渐变 效果 : 


.colorBlendBox { 
background: linear-gradient(from top, white, blue); 



































它 换 成 tc， 这 


化 
C. 


from 关 键 字 指定 了 第 一 个 渐变 颜色 ( 白色 ) 的 起 始 位 置 是 顶部 (top )， 可 以 
样 渐变 就 反 转 为 从 底部 的 蓝 色 到 顶部 的 日 色 : 

background: linear-gradient(to top, white, blue); 

类 似 地， 将 top 修 改 为 left 就 可 以 创建 从 一 边 到 另 一 边 的 渐变 。 或 者 两 个 都 用 ， 创 建 从 左上 
角 开 始 的 对 角 线 渐变 : 

background: linear-gradient(from top left, white, lightblue) 

如 果 想 多 用 儿 种 颜色 ， 没 问题 ， 只 要 依次 列 出 颜色 值 即 可 。 比 如 ， 要 创建 一 个 红 、 橙 、 黄 的 
三 色 渐 变 ， 以 红色 从 项 部 开始 ， 这 样 写 就 可 以 了 : 

background: linear-gradient(from top, red, orange, yellow); 

最 后 ， 还 可 以 使 用 渐变 点 〈gradient stop ) 控制 每 个 颜色 的 起 点 。 每 个 渐变 点 用 百分比 值 表 
示 ，0% 就 是 整个 渐变 的 起 点 ， 而 100% 则 是 整个 渐变 的 终点 。 下 面 这 个 例子 把 橙色 和 黄色 的 范围 
扩展 到 了 中 间 : 


background: linear-gradient(from top, red 0%, orange 20%, yellow 80%, 
violet 100%); 


linear-gradient() 函 数 的 语法 很 好 掌握 。 有 个 坏 消息 : 为 保证 对 Android 浏 览 器 和 稍 旧 一 点 
的 Safari (Safari 7 之 前 ) 浏览 器 的 支持 ， 还 需要 加 上 开发 商 前 缀 -webkit- 。 更 糟糕 的 是 ， 
-webkit-linear-gradient() 隐 数 和 真正 的 linear-gradient() 子 数 有 一 些 细 微 的 差别 。 与 
linear-gradient() 不 同 ，-webkit-linear-gradient() 不 使 用 from 来 指定 方向 ， 而 是 自动 赋值 。 
下 面 是 一 段 兼容 了 稍 旧 一 点 浏览 器 的 样式 代码 ， 添 加 了 一 个 带 开 发 商 前 绥 的 渐变 : 
.colorBlendBox { 
background: lightblue; 
background: -webkit-linear-gradient(top left, white, lightblue); 


background: linear-gradient(from top left, white, lightblue); 
} 


幸运 的 是 ， 不 需要 添加 其 他 的 开发 商 前 绥 (比如 -moz- 和 -o- )， 除 非 你 想 要 支持 更 老 版 本 的 
Firefox 和 Opera。 
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提示 “在 所 有 这 些 例 子 中 ， 渐 变 都 是 通过 background 属 性 实现 的 。 实 际 上 ， 对 background-image 
属性 使 用 同样 的 渐变 函数 也 能 达到 相同 的 目的 。 唯 一 的 区 别 是 使 用 background-image 属 
性 ， 可 以 创建 背景 图 像 作 为 后 备 。 方 法 相信 不 说 你 也 知道 ， 即 先 用 background-image 属 性 
为 那些 后 进 的 浏览 器 指定 一 个 类 似 的 背景 图 片 , 然后 再 对 background-image 属 性 应 用 渐变 
函数 。 支 持 渐变 的 浏览 器 一 般 也 很 聪明 ， 除 非 必 要 ， 否 则 它们 不 会 下 载 后 备 图 片 ， 从 而 
节省 带宽 。 


2. 放射 性 渐变 

要 创建 放射 性 渐变 , 使 用 radial-gradient() 函 数 。 我 们 要 为 这 个 函数 提供 一 个 圆心 颜色 和 一 
个 圆周 颜色 ,圆周 与 元 素 边界 接触 。 下 面 这 个 放射 性 渐变 其 圆心 是 白色 ,然后 逐渐 过 渡 到 圆周 的 
蓝 色 : 

background: radial-gradient(circle, white, lightblue); 

保险 起 见 ， 还 是 要 加 上 一 条 带 -webkit- 前 级 的 : 

background: -webkit-radial-gradient(circle, yellow, green); 

如 果 要 将 渐变 拉 伸 成 椭圆 形 的 以 更 好 地 适 配 容器 ， 可 以 将 circle 修 改 为 ellipse。 

和 线性 渐变 一 样 , 我 们 可 以 选择 很 多 颜色 。 可 以 通过 添加 百分比 来 调节 从 一 个 颜色 渐变 到 另 
一 个 颜色 的 快慢 。 下 面 这 个 例子 中 , 渐变 从 黄色 开始 ,缓慢 地 渐变 到 绿色 ， 然 后 在 靠近 元 素 边缘 
的 位 置 ， 了 迅 速 地 渐变 到 蓝 色 、 白 色 和 黑色 。 


background: radial-gradient(circle, yellow 10%, green 70%, blue, white, 
black); 


我 们 也 可 以 用 百分比 来 设置 渐变 的 中 心 位 置 。 比 如 , 如 果 想 要 渐变 的 中 心 点 靠近 元 素 的 有 上 
角 ， 可 以 用 下 面 这 种 放射 性 渐变 

background: radial-gradient(circle at 90% 5%, white, lightblue); 

这 对 百分比 告诉 浏览 絮 渐 变 开始 的 位 置 为 离 左 边缘 90% ( 这 几乎 要 到 右边 缘 了 ) 和 离 上 边 
缘 5%。 












































注意 iadial-gradient() 函 数 的 语法 已 经 和 它 诞生 时 不 一 样 了 ， 用 以 指定 渐变 中 心 点 位 置 的 at 
关键 字 ， 是 一 个 较 新 的 特性 。 虽 然 在 radial-gradient() 函 数 中 使 用 at 是 安全 的 ， 但 不 要 
试图 在 有 开发 商 前 组 的 -webkit-Tradial-gradient() 函 数 中 使 用 它 。 


3. 循环 渐变 

CSS3 还 有 两 个 可 以 创建 绚丽 渐变 的 函数 : repeating-linear-gradient() 和 Tepeating- 
radial-gradient()。linear-gradient() 和 radial-gradient() 只 将 所 设置 的 颜色 渐变 一 次 ， 而 
repeating-linear-gradient() 和 repeating-radial-gradient() 消 数 会 以 相同 的 颜色 顺序 无 尽 地 循 
环 渐变 ， 直 到 颜色 条 纹 填 满 了 元 素 。 这 种 醉人 的 扎 染 效果 会 让 你 民 履 觉得 仿佛 回 到 了 20 世 纪 70 
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年 代 。 

repeating-linear-gradient() 和 repeating-radial-gradient() 函数 的 语法 基本 上 与 
linear-gradient() 和 radial-gradient() 一 样 。 唯 一 的 不 同 是 ， 你 需要 确保 限制 了 渐变 的 大 小 ， 
以 使 其 可 以 循环 。 

比如 ,下 面 这 个 循环 渐变 的 效果 与 普通 渐变 完全 一 样 ， 因 为 它 没有 限制 大 小 , 而 是 从 中 心 开 
始 ， 以 黄色 渐变 到 边缘 的 绿色 : 

background: repeating-radial-gradient(circle, yellow, green); 

下 面 的 渐变 就 不 同 了 ， 它 设置 中 心 的 颜色 为 黄色 ,但 设置 绿色 在 10% 的 位 置 就 结束 。 然 后 ， 
渐变 循环 ， 又 以 黄色 开始 。 产 生 的 效果 就 是 混合 了 黄色 到 绿色 过 渡 的 条 纹 : 

background: repeating-radial-gradient(circle, yellow, green 10%); 

循环 渐变 中 你 可 以 设置 任意 多 的 颜色 。 关键 在 于 要 确保 最 后 的 颜色 包含 了 一 个 百分比 或 像素 
值 ， 这 设置 了 颜色 的 位 置 ， 而 不 是 放 在 元 素 的 边缘 。 

除了 使 用 百分比 ， 还 可 以 用 像素 值 ， 像 下 面 这 样 : 


background: repeating-linear-gradient(to top, red, orange, white, yellow, 
red 30px); 


这 个 渐变 创建 了 一 个 稍微 不 一 样 的 效果 。 现 在 每 个 条 纹 都 有 一 样 的 宽度 (30 像素 )， 条 纹 的 
数量 取决 于 元 素 内 的 空间 大 小 。 通 过 比较 可 以 发 现 ,前 面 的 例子 中 总 是 有 10 个 按 比 例 划 分 的 条 纹 ， 
每 一 个 填充 了 元 素 空间 的 10% ( 确切 地 说 ， 是 条 纹 宽度 与 空间 最 大 半径 的 比例 )。 







































































提示 “有 两 个 关于 循环 渐变 的 警示 。 首 先 ， 只 能 用 to 关键 字 ， 而 不 能 用 from， 因 为 一 个 循环 渐 
变 只 能 向 一 个 方向 填充 。 其 次 ， 如 果 想 要 渐变 的 每 一 个 循环 过 渡 得 平滑 一 些 ， 而 不 是 一 
个 生硬 的 颜色 变化 ， 就 要 确保 颜色 列表 中 的 最 后 一 个 颜色 和 第 一 个 颜色 一 样 。 


优雅 的 渐变 
创建 复杂 的 渐变 是 个 精细 活 儿 。 要 加 快 这 个 过 程 ， 你 可 能 想 要 一 个 在 线 的 渐变 生成 工具 。 
方案 很 简单 : 在 网 页 中 调节 控制 器 直到 渐变 达到 满意 的 效果 ， 然 后 工具 会 生成 所 需 的 代码 ( 包 
括 不 同 开发 商 前 组 的 所 有 代码 , 以 防 万 一 需要 ),。 有 两 个 不 错 的 渐变 生成 工具 ， 分别 是 Ultimate 
CSS Gradient Generator ( www.colorzilla.com/gradient-editor ) 和 微软 的 CSS Gradient Background 
Maker (http://tinyurl.com/ms-gradient )。 


6.3 ”创建 过 渡 效 果 


在 CSS2.1 炙 手 可 热 的 时 候 ， 开 发 者 们 对 伪 类 (参见 附录 A ) 这 个 新 特性 感到 非常 兴奋 。 仿 佛 
一 夜 之 间 ， 大 家 用 :hover 和 :focus 伪 类 ， 就 能 实现 原来 需要 JavaScript 才 能 做 出 来 的 效果 。 比 如 ， 
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要 为 按钮 创建 鼠标 悬 停 效果 ， 只 要 为 :hover 伪 类 应 用 一 组 新 样式 即 可 。 当 访客 鼠标 移动 到 按钮 上 
面 时 ,浏览 絮 就 会 自动 为 按钮 应 用 这 些 组 新 样式 。 





提示 ”如果 你 还 不 知道 怎么 创建 按钮 的 自 标 悬 停 效 果 ， 千 万 要 看 一 看 Creating a Webaite: The 
Missing Manual 这 本 书 。 另外， 看 看 这 篇 文章 也 行 : www.elated.com/articles/css-rollover- 


buttons/。 


伪 类 创造 的 交互 特性 虽 好 , 但 已 经 有 点 过 时 了 。 主要 问题 是 一 一 太 突然 了 。 换 句 话 说 ， 如 果 
使 用 了 :hover 伪 类 ， 鼠 标 放 上 去 马上 换 样 式 ， 鼠 标 一 离开 马上 就 没有 ， 太 突然 了 。 太 突然 了 就 显 
示 得 不 自然 了 。 想 想 在 Flash 应 用 或 者 其 他 桌面 应 用 中 , 类 似 的 效果 要 优雅 得 多 。 当 我 们 把 鼠标 悬 











停 到 某 个 按钮 上 时 ， 其 颜色 会 切换 、 位 置 会 改变 ， 甚 至 会 发 光 ， 整 个 过 程 会 持续 一 小 段 时 间 ， 而 
且 是 以 动画 效果 完成 。 

















不 少 Web 开 发 人 员 已 经 开始 在 自己 的 网 页 中 添加 类 似 的 效果 了 。 但 这 些 效果 一 般 都 要 借助 第 
三 方 的 JavaScript 动 画 框架 来 完成 。 实 际 上 ，CSS3 提 供 了 一 个 更 简单 的 方案 ， 即 新 的 过 渡 
(transition ) 功能 ， 可 以 从 一 组 样式 平滑 地 切换 到 另 一 组 样式 。 
6.3.1 基本 的 颜色 过 渡 


要 理解 什么 是 过 渡 ， 最 好 是 看 一 个 例子 。 图 6-10 展 示 了 一 个 按钮 的 颜色 过 渡 ， 使 用 了 CSS3 
的 过 渡 功 能 。 

















图 6-10: 如 果 这 是 普通 的 翻转 按钮 ， 那 么 鼠标 一 上 来 背景 
Er 就 会 突然 从 绿色 变 成 黄色 。 但 使 用 了 过 渡 之 后 ， 绿 色 会 融 
dy 入 黄色 ， 切 换 过 程 会 持续 半 秒 钟 。 鼠 标 离开 按钮 后 ， 相 同 

的 过 渡 又 会 发 生 ， 只 不 过 颜色 切换 的 顺序 相反 ， 之 后 按钮 


恢复 到 初始 状态 。 给 人 的 感觉 就 是 按钮 很 精致 。 ( 如 果 要 
试 一 下 ， 可 以 访问 http://prosetech.com/html5 的 试验 页 面 ) 









































首先 ， 想 一 下 如 何以 常规 方式 写 这 个 按钮 的 样式 ， 而 不 使 用 过 渡 。 这 是 基本 的 CSS， 需 要 用 
一 条 规则 设置 按钮 的 初始 样式 ， 再 用 一 条 规则 设置 鼠标 悬 停 的 样式 : 


.SlickButton { 
color: white; 
font-weight: bold; 
padding: 10px; 
border: solid 1px black; 
background: lightgreen; 
cursor: pointer; 


} 





.SlickButton:hover { 
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color: black; 
background: yellow; 
} 


下 面 是 一 个 使 用 这 些 样式 规则 的 按钮 : 
<button class="slickButton">Hover Here!l</a> 


这 种 方式 很 好 , 但 不 够 精致 。 为 了 更 平滑 地 从 绿 变 黄 , 需要 用 transition 属 性 创建 一 个 CSS3 
过 渡 效 果 。 而 相应 的 属性 声明 要 写 在 正常 状态 下 的 .slickButton 样 式 规 则 中 ( 而 不 是 :hover 伪 类 
规则 中 )。 

最 低 限度 也 要 为 每 个 过 渡 设 置 两 方面 信息 : 要 过 渡 的 CSS 属 性 和 动画 时 长 。 在 这 个 例子 中 ， 
过 渡 的 是 背景 颜色 ， 而 持续 时 间 为 0.3 秒 : 


.SlickButton { 
color: white; 
font-weight: bold; 
padding: 10px; 
border: solid 1px black; 
background: lightgreen; 
cursor: pointer; 
-webkit-transition: background 0.5s; 
transition: background 0.5s; 


} 



































.SlickButton:hover { 
color: black; 
background: yellow; 

} 


我 想 你 一 定 注 意 到 了 ， 这 个 例子 使 用 了 两 个 过 渡 属 性 ， 而 不 是 前 面 所 说 的 一 个 。 这 是 因为 
CSS3 过 渡 的 标准 尚未 定稿 ， 并 且 一 些 浏览 器 仍然 需要 开发 商 前 缀 -webkit-。 

亲手 试验 一 下 ,会 发 现 这 个 例子 有 个 问题 。 这 个 巧 停 过 渡 按 钮 会 切换 两 个 样式 : 背景 颜色 和 
文本 颜色 。 但 是 我 们 写 的 过 渡 属 性 只 指定 要 过 渡 背 景 颜色 。 结 果 就 是 文本 一 下 子 会 由 白色 变 成 黑 
色 ， 而 新 的 背景 颜色 则 会 慢 半 拍 才 出 现 。 

有 两 个 方法 解决 这 个 问题 。 第 一 个 办 法 是 用 逗号 作为 分 隔 符 ,指定 同时 过 渡 背 景 和 文本 颜色 : 

.SlickButton { 


















































-webkit-transition: background 0.5s, color 0.5s; 
transition: background 0.5s, color 0.5s; 


另外 , 还 有 一 个 更 简单 的 办 法 。 如 果 你 想 过 渡 所 有 样式 ， 而 且 和 希望 所 有 过 渡 都 同步 完成 ,可 
以 在 原来 指定 属性 名 的 地 方 指定 all: 


-webkit-transition: all 0.5s; 
transition: all 0.5s; 
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目前 ， 所 有 浏览 器 的 最 新 版 本 都 支持 过 渡 。 旧 版 的 IE (IE9 及 其 更 早 版 本 ) 还 不 支持 过 渡 ， 
加 开发 商 前 绥 也 不 行 。 不 过 ， 即 使 浏览 器 不 支持 过 渡 好 像 也 问题 不 大 。 因 为 就 算 忽 略 过 渡 属 性 ， 
效果 还 是 有 的 ， 只 不 过 是 突然 切换 ， 而 不 是 平滑 地 过 渡 了 。 这 还 是 不 错 的 ， 因 为 这 意味 着 网 站 可 
以 添加 过 渡 功能 ， 但 同时 又 可 以 为 旧版 本 浏览 器 提供 基本 不 变 的 样式 。 


6.3.2 更 多 的 过 渡 思 路 


利用 CSS 过 渡 把 简单 的 颜色 过 渡 提 升 到 精致 的 程度 已 经 不 错 了 。 可 是 ， 如 果 你 想 做 出 更 加 好 
玩 的 翻转 按钮 或 菜单 ， 那 么 可 以 考虑 更 多 可 以 过 渡 的 属性 。 以 下 是 一 些 还 算 不 错 的 建议 。 
口 透明 度 。 通 过 修改 opacity 属 性 ， 可 以 实现 图 像 的 淡 入 淡出 。 只 是 要 记 住 ， 别 把 图 像 变 得 
完全 透明 ， 否 则 访客 根本 不 知道 图 像 在 哪 。 
口 阴影 。 前 面 6.2.4 节 已 经 介绍 了 box-shadow 属 性 ,通过 它 可 以 为 任何 盒子 元 素 添加 阴影 。 而 
且 合 适 的 阴影 也 可 以 制作 出 漂亮 的 悬 停 效果 。 特 别 是 没有 偏 移 但 有 模糊 的 阴影 ， 可 以 用 
来 生成 经 典 的 发 光 效 果 。 当 然 ， 利 用 inset 阴 影 也 可 以 做 出 内 发 光 来 。 
口 渐变 。 把 线性 渐变 改 成 放射 性 渐变 一 一 不 管 怎么 说 ， 这 种 效果 想 错过 都 难 。 
口 变形 。6.3.4 节 将 会 介绍 ， 利 用 变形 可 以 移动 元 素 、 调 整 元 素 大 小 ， 甚 至 可 以 对 元 素 任意 
变形 。 这 些 效果 当然 也 是 过 渡 的 首选 。 
另外 , 对 内 边 距 ( padding )、 外 边 距 (margin ) 和 字体 大 小 ( font-size ) 应 用 过 渡 不 值得 考虑 。 
这 些 过 渡 操 作 会 耗费 更 多 电量 〈 因为 浏览 器 要 重新 计算 布局 大 小 或 文本 提示 )， 而 且 可 能 导致 响应 
迟 顿 和 卡 壳 。 如 果 你 想 移动 、 放 大 或 缩小 元 素 ， 那 么 最 好 还 是 使 用 变形 技术 (参见 6.3.4 六 ) 







































































































































































6.3.3 用 JavaScript 触 发 过 渡 


如 你 所 见 ， 过 渡 会 在 元 素 从 一 个 样式 切换 到 另 一 个 样式 时 生效 。 如 果 想 用 一 个 优雅 的 、 节 省 
代码 的 方式 来 实现 ， 可 以 用 像 :hover 和 :focus 这 样 的 伪 类 。 但 这 种 方式 有 个 明显 的 限制 。 比 如 ， 
这 种 方式 不 能 让 过 渡 在 另 一 个 时 间 发 生 或 者 响应 另 一 个 事件 , 也 不 能 让 过 渡 由 一 个 元 素 触发 然后 
对 另 一 个 元 素 起 作用 。 像 这 样 的 情况 ， 需 要 搞 点 JavaScript 代 码 帮 忙 。 

幸运 的 是 , 创建 一 个 JavaScript 驱 动 的 过 渡 并 不 难 。 和 普通 过 渡 一 样 , 先 要 创建 两 个 样式 规则 ， 
一 个 是 元 素 的 初始 状态 , 一 个 是 过 渡 结 束 的 状态 。 然后 用 JavaScript 代 码 查 找 相 应 的 元 素 并 在 合适 
的 时 机 修改 它 的 样式 。 






























































不 要 抛弃 老 版 本 浏览 
我 们 知道 ， 不 支持 过 渡 的 浏览 器 会 突然 切换 样式 ， 但 这 还 是 不 错 的 。 可 是 ， 如 果 你 使 用 了 
装饰 性 的 CSS3 样式 ( 比如 带 阴 影 或 渐变 的 按钮 ), 那 么 老 版 本 的 浏览 器 则 会 完全 忽略 这 些 样式 。 
这 样 就 不 太 好 了 。 这 意味 着 使 用 老 浏 览 器 的 访客 根本 看 不 到 饼 标 悬 停 的 效果 。 
解决 这 个 问题 的 办 法 就 是 使 用 老 浏览 器 支持 的 后 备 样式 。 比如, 可 以 创建 一 个 使 用 不 同 背 
景 颜色 的 后 备 悬 停 规则 ,然后 再 为 悬 停 规则 设置 渐变 。 这 样 老 浏 览 器 至 少 能 在 鼠标 悬 停 时 显示 
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背景 变化 。 而 支持 渐变 的 浏览 器 则 会 切换 到 渐变 填充 状态 。 要 想 实 现 更 精确 的 控制 ， 可 以 考虑 
Modernizr， 这 样 就 能 为 老 版 本 浏览 器 添加 完全 不 同 的 样式 ( 参见 1.6.7 节 )。 








图 6-11 展 示 了 一 个 用 代码 驱动 过 渡 的 例子 。 在 这 个 页 面 中 ， 两 张 图 片 相 互 逛 盖 一 一 同一 城 
市 天 际 线 的 日 景 图 和 夜景 图 。 按 钮 用 了 几 行 简单 的 JavaScript 代 码 来 触发 一 个 显示 或 隐藏 夜景 图 
的 过 湾 。 








= 己基 滞 图 6-11:; 开始 时 , 夜景 图 是 完 
透明 的 ( 上 ) 。 点 击 To Night 
按钮 后 夜景 图 淡 入 ， 渐渐 遮盖 
日 景 图 ( 下) 
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创建 这 个 例子 的 第 一 步 是 添加 一 个 给 图 片 格式 化 的 样式 规则 , 主要 做 两 件 事 : 设置 图 片 为 绝 
对 定位 (这样 就 能 在 包含 它们 的 <div> 元 素 中 用 一 张 图 片 覆盖 另 一 张 ) 然后 定义 要 使 用 的 过 渡 类 
型 。 这 里 用 的 是 一 个 历时 10 秒 的 改变 夜景 图 透明 度 的 过 渡 。 
img { 
position: absolute; 
-webkit-transition: opacity 10s; 


transition: opacity 10s; 


} 
我 们 还 需要 两 条 样式 规则 代表 夜景 图 的 两 种 不 同 的 状态 , 开始 时 是 完全 透明 的 , 但 是 在 点 击 
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按钮 时 可 以 变 得 不 透明 。 


.Solid { 
opacity: 1; 


.transparent { 
opacity: 0; 


HTML 代 码 将 两 张 图 片 都 放 在 一 个 <div> 内 ， 把 transparent 类 赋 给 第 二 张 图 片 ， 还 定义 了 两 
个 按钮 ， 并 将 点 击 事件 回调 函数 写 死 在 标签 中 。 


<div> 

<img src="day.png" alt="Daytime view"> 

<img id="nightImage" src="night.png" alt="Night-time view" 
class="transparent"> 
</div> 














<button onclick="toNight()">Go to Night</button> 
<button onclick="toDay()">Go to Day</button> 


下 面 是 响应 按钮 点 击 的 函数 代码 ， 找 到 夜景 图 ， 然 后 切换 它 的 样式 。 


function toNight() { 
var nightImage = document.getElementById("nightImage"); 
nightImage.className = "solid"; 


function toDay() { 
var nightImage = document.getElementById("nightImage"); 
nightImage.className = "transparent"; 


虽然 这 看 上 去 就 像 一 个 生硬 的 行为 , 但 实际 上 是 在 10 秒 内 平稳 地 变化 , 这 得 益 于 给 所 有 <img> 
元 素 定义 的 过 渡 。 

记 住 , 只 有 当 用 户 使 用 现代 浏览 器 浏览 时 才 有 过 渡 。 如 果 在 IE9 中 浏览 并 点 击 To Night 或 者 To 
Day 按 钮 ， 页 面 会 生硬 地 切换 样式 ， 没有 10 秒 的 过 渡 效 果 。 不 幸 的 是 ， 还 没有 填补 这 个 缺口 的 办 
法 ， 并 且 当 你 开始 使 用 过 渡 时 ,很 容易 忽视 页 面 在 旧版 浏览 器 上 会 是 什么 样子 。 

















注意 ”如果 动画 效果 是 你 的 页 面 所 必需 的 一 部 分 ， 可 能 你 还 没有 完全 准备 好 使 用 CSS3， 毕 竞 目 
前 使 用 最 多 的 过 渡 解 决 方案 是 像 jQuery UI 或 MooTools 这 样 的 JavaScript 库 。 但 尹 庸 置疑 的 
是 ， 当 标准 敲定 并 且 现 代 浏 览 器 遍布 全 世界 的 时 候 ，CSS3 一 定 是 Web 特 效 的 未 来 。 


6.3.4 变换 


变换 是 一 个 强大 的 工具 ， 可 以 移动 、 缩 放 、 斜 切 和 旋转 元 素 ， 扭 曲 它 的 外 观 。 利 用 CSS3 变 
换 ， 则 可 以 改变 元 素 的 外 观 。 与 过 渡 类 似 ， 变 换 也 是 一 个 新 的 、 试 验 性 的 功能 。 要 使 用 变换 ， 需 
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要 用 transform 必 性。 下面 是 一 个 旋转 元 素 及 其 内 容 的 例子 : 


.rotatedElement { 
transform: rotate(45deg); 
要 让 变换 在 Chome、Safari 和 Opera 上 生效 ,需要 添加 -webkit- 前 级 。 在 IE9 中 ， 需 要 添加 -ms- 
前 级 ( 而 IE10 及 其 更 新 版 本 不 需要 任何 前 级 )。Firefox 不 需要 前 级 。 所 以 除非 你 在 用 -prefix-free 
库 (参见 6.2 节 )， 否 则 使 用 变换 的 正确 方式 应 该 是 像 下 面 这 样 : 
.rotatedElement { 
-ms-transform: rotate(45deg); 


-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 











让 过 渡 更 自然 
transition 是 一 个 组 合 了 很 多 细节 的 集大成 属性 。 到 目前 为 止 ， 你 已 经 知道 了 如 何 给 过 渡 
虽 定 时 长 和 变化 的 样式 属性 。 然 而 ， 还 有 两 个 可 以 用 来 调整 过 渡 的 细节 。 
首先 ,可 以 用 一 个 调 速 函数 来 控制 过 渡 的 运行 效果 ， 比 如， 开始 很 慢 然 后 加 速 或 者 开始 很 
快 然后 减速 。 在 时 间 短 的 过 渡 里 , 调 速 函数 的 效果 不 明显 , 但 是 在 长 一 点 的 、 更 复杂 的 动画 中 ， 
它 能 彻底 改变 效果 。 下 面 这 个 例子 用 了 ease-in-out 这 个 调 速 函数 ， 这 样 过渡 开 始 时 慢 ， 然 后 
加 速 ， 然 后 慢 下 来 直到 最 后 : 

transition: opacity 10s ease-in-out; 

其 他 调 速 函数 有 linear ( 过 渡 的 速率 从 开始 到 结束 是 恒定 的 )、ease-in (过 渡 开 始 慢 ， 然 
后 以 恒定 的 速率 运行 )、ease-out (过 渡 以 恒定 的 速率 开始 , 但 在 后 面 会 慢 下 来 )、cubic-bezier 
( 过 渡 效 果 根 据 所 定义 的 贝 塞 尔 曲 线 运 行 )。 

不 管用 什么 调 速 函数 , 整个 过 渡 耗 时 相同 你 指定 的 时 长 , 不 同 之 处 在 于 过 渡 运 行 时 如 
何 加 速 或 减速 。 要 查看 不 同 的 调 速 函数 ， 并 感觉 一 下 它们 如 何 改变 过 渡 的 步调 ， 可 以 访问 
http://css3.bradshawenterprises.com/transitions/， 在 这 里 可 以 看 到 用 一 连 串 滚动 的 方块 动画 演示 
的 不 同调 速 函数 的 效果 。 

过 渡 的 另 一 个 可 以 添加 的 细节 是 一 个 可 选 的 延 时 ,用 以 将 过 渡 的 开始 推迟 一 段 时 间 。 下 面 
是 一 个 等 待 0.1 秒 的 例子 : 


transition: opacity 10s ease-in-out 0.1s; 





在 前 面 的 例子 中 ,我 们 使 用 rotate() 函 数 把 元 素 围 绕 其 中 心 点 旋转 了 45 度 。 不 过 ,还 有 很 多 
变换 函数 ， 可 以 使 单独 使 用 ， 也 可 以 结合 使 用 。 比 如 ， 下 面 的 例子 就 连续 使 用 了 三 种 变换 效果 : 
先 把 元 素 增 大 一 半 (使 用 scale 变 换 )， 再 向 左 移动 10 个 像素 ( 使 用 scaleX 变 换 )， 然 后 又 斜 切 了 
10” (使 用 skew 变 换 ): 


.rotatedElement { 
-ms-transform: scale(1.5) scaleX(10px) skew(10deg); 
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-webkit-transform: scale(1.5) scaleX(10px) skew(10deg); 
transform: scale(1.5) scaleX(10px) skew(10deg); 


} 

和 斜 切 的 意思 就 是 扭曲 变形 。 想 象 一 下 ， 有 一 个 纸箱 子 躺 在 那儿 ， 口 朝 着 你 。 你 把 它 的 顶部 用 
力 推 向 一 侧 ， 而 底部 还 固定 不 动 (结果 就 变 成 了 平行 四 边 形 )。 

表 6-2 列 出 了 所 有 可 用 的 二 维 变 换 函 数 。 要 移 除 所 有 的 变换 效果 ， 可 将 transform 属 性 设置 为 


noneo 




















注意 ”变换 不 会 影响 页 面 中 的 其 他 元 素 ， 也 不 会 影响 布局 。 例 如 ， 通 过 变换 放大 某 个 元 素 ， 那 


影响 
么 该 元 素 会 简单 地 覆盖 相 令 元素 。 


表 6-2 ”变换 函数 






































































































































函 数 描 述 

translateX(X) 在 水 平方 向 移动 元 素 ， 正 值 向 右 移动 ， 负 值 向 左 移动 

translateY(y) 在 垂直 方向 移动 元 素 ， 正 值 向 下 移动 ， 负 值 向 上 移动 

translate(x, y) 在 水 平和 垂直 方向 移动 元 素 

scaleX(x) 在 水 平方 向 缩放 元 素 。 比 1.0 大 的 值 为 放大 〈2.0 是 两 倍 大 ) ，0 到 1.0 之 间 的 值 为 缩 
小 (0.5 是 一 半 大 ) 。 使 用 负 值 会 将 元 素 绕 y 轴 翻转 ， 创 建 一 个 从 右 到 左 的 镜像 

scaleY(y) 在 垂直 方向 缩放 元 素 。 比 1.0 大 的 值 为 放大 ，0 到 1.0 之 间 的 值 为 缩小 。 使 用 负 值 会 将 
元 素 绕 x 轴 翻 转 ， 创 建 一 个 从 下 到 上 的 镜像 

scale(x, y) 在 水 平和 垂直 方向 缩放 元 素 

rotate(angle) 围绕 元 素 中 心 顺 时 针 旋 转 。 用 负 值 则 逆 时 针 旋 转 。 可 以 用 CSS 的 transform-origin 
属性 让 元 素 围绕 其 他 点 旋转 

skewX(angle) 在 水 平方 向 倾斜 元 素 。 上 下 边缘 仍然 水 平 ， 左 右边 缘 倾斜 

skewY(angle) 在 垂直 方向 倾斜 元 素 。 左 右边 缘 不 倾斜 ， 上 下 边缘 倾斜 

skew(x-angle，y-angle) 在 水 平和 垂直 方向 倾斜 




















matrix(n1，n2，n3，n4，n5，n6) ”用 矩阵 乘法 来 变换 元 素 。 这 个 用 6 个 数字 表示 的 矩阵 ， 可 以 复制 任何 其 他 变换 (或 
任何 变换 组 合 ) 。 但 是 , 你 不 太 可 能 自己 创建 所 需 的 矩阵 , 即便 你 是 个 数学 爱好 者 ， 
也 很 可 能 会 用 工具 来 生成 你 想 要 的 矩阵 
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注意 当 你 已 经 玩 腻 了 在 二 维 空间 移动 元 素 ， 可 以 用 3D 变 换 在 三 位 空间 移动 、 旋 转 和 弯曲 元 素 。 
可 以 在 http:Wtinyurl.com/3d-transitions 找 到 一 些 可 交互 的 3D 变 换 的 好 例子 。 


如 何 移动 起 始点 
一 般 来 讲 ， 变 换 是 以 元 素 的 中 心 点 为 参照 点 的 。 可 以 通过 在 应 用 变换 前 用 
transform-origin 属 性 来 移动 这 个 参照 点 。 比 如 ， 下 面 这 个 合子 介绍 了 如 何 围绕 元 素 的 左上 角 


旋转 : 
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.rotatedElement { 
-ms-transform-origin: 0% 0%; 
-webkit-transform-origin: 0% 0%; 
transform-origin: 0% 0%; 


-ms-transform: rotate(45deg); 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 


} 

要 围绕 右上 角 旋 转 ， 可 以 用 100% 0% 这 个 值 。 甚至 可 以 指定 一 个 不 在 元 素 上 的 很 远 的 参照 
点 (比如 50% 200%， 这 样 参照 点 位 置 在 元 素 水 平方 向 的 中 间 ， 和 从 上 边缘 向 下 两 倍 于 元 素 高 
度 的 地 方 )。 

默认 情况 下 ，transform-origin 属 性 设置 为 50% 50%， 这 刚好 是 元 素 的 中 心 点 。 


6.3.5 ”使 用 变换 的 过 渡 
变换 和 过 渡 可 以 说 是 天 生 一 对 。 假 设 你 想 创建 一 个 在 线 的 数字 影集 ， 如 图 6-12 所 示 。 






































ele elel 图 6-12; 在 这 个 影集 中 ， 
© Image Gallery Vw © Image Gallery Vw i 
CQ Q ImageGallery.html AAA CE Q ImageGallery.html > 鼠标 悬 停 后 的 变换 效果 
让 图 片 感觉 跳 了 出 来 
Cute Animal Page Cute Animal Page 
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这 个 例子 的 基本 标记 是 很 简单 的 ， 就 是 在 一 个 cdiv> 中 放 和 人 一 堆 图 片 : 


<div class="gallery"> 
<img src="bunny.jpg"> 
<img src="cat.jpg"> 
<img src="dog.jpg"> 
<img src="platypus.jpg"> 
<img src="goose.jpg"> 
</div> 


以 下 是 为 容纳 图 片 的 <div> 元 素 应 用 的 样式 : 
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.gallery { 
margin: Opx 30px Opx 30px; 
background: #D8EEFE; 
padding: 10px; 

















下 面 则 是 为 每 个 cimg> 元 素 应 用 的 初始 样式 : 


.gallery img { 
margin: 5px; 
padding: 5px; 
width: 75px; 
border: solid 1px black; 
background: white; 


} 

注意 ,这 里 为 每 个 图 片 都 设置 相同 的 宽度 ( 使 用 width 属性 )。 这 是 因为 根据 例子 的 需要 ， 必 
须 在 显示 图 片 时 ,显示 较 大 图 片 的 缩小 版 。 换 句 话 说, 这 样 浏览 带 在 通过 变换 放大 图 片 时 才 有 余 
地 。 如 果 这 里 不 是 给 大 图 片 设置 小 一 点 的 尺寸 ,而 是 统一 显示 纵 略 图 大 小 的 图 片 ， 那 它们 放大 后 
就 会 模糊 不 清 了 。 

接 下 来 做 悬 停 效果 。 当 用 户 鼠 标 移 动 到 图 片上 时 ， 浏 览 器 应 该 旋转 并 稍微 放大 一 点 图 片 : 


.gallery img:hover { 
-ms-transform: scale(2.2) rotate(10deg); 
-webkit-transform: scale(2.2) rotate(10deg); 
transform: scale(2.2) rotate(10deg); 


} 
这 样 就 可 以 通过 变换 把 图 片 放大 到 新 尺寸 并 旋转 一 定 角度 。 而 为 了 让 这 个 效果 看 起 来 看 自然 
流畅 ， 还 可 以 在 正常 状态 下 定义 一 个 针对 所 有 样式 的 过 渡 : 


.gallery img { 
margin: 5px; 
padding: 5px; 
width: 75px; 
border: solid 1px black; 
-ms-transition: all 1s; 
-webkit-transition: all 1s; 
transition: all 1s; 
background: white; 


} 
好 了 ， 鼠 标 悬 停 时 ， 图 片 的 旋转 和 增 大 会 在 1 秒 钟 内 完成 。 而 鼠标 离开 时 ， 图 片 又 会 收缩 并 
回 到 原 位 ， 同 样 还 是 用 1 秒 钟 时 间 。 




































































6.4 Web 字体 


在 CSS3 所 有 时 瞩 的 新 功能 中 ， 很 难说 哪个 最 好 。 但 是 ,假如 非 要 找 出 那么 一 个 功能 ， 一 个 
现在 就 能 用 ， 而 且 能 够 令 人 浮想 联翩 的 功能 ， 我 想 就 要 数 Web 字 体 了 。 
以 前 ，Web 设 计 人 员 只 能 使 用 少数 几 种 安全 字体 。 所 谓 安 全 字体 ， 就 是 已 知 的 所 有 浏览 需 和 














174 | 第 6 章 美妙 的 C553 字体 和 特效 





操作 系统 都 支持 的 字体 。 然 而 ,任何 一 位 有 点 经 验 的 设计 师 都 知道 , 字体 在 营造 文档 氛围 的 过 程 
中 ， 具 有 不 可 蔡 代 的 重要 作用 。 选 择 一 款 合适 的 字体 ， 原 本 冷冰冰 的 学 术 说 教 ， 瞬 间 就 会 让 人 暇 
思 无 限 ， 而 从 古典 守旧 到 未 来 主义 同样 也 只 有 一 步 之 毅 


注意 、 浏览 器 不 急于 实现 自 定义 Web 字 体 ? 首先 ， 有 一 个 优化 的 问题 。 由 于 计算 机 显示 
分 辨 率 远 远 赶不上 印刷 的 精度 ， 所 以 如 果 Web 字 体 设 置 不 当 ， 显 示 器 在 显示 小 号 字 
te 会 模糊 一 团 。 其 次 ， 大 多 数字 体 并 非 免 费 。 微 软 等 大 公司 显 De 鼓励 Web 开 
发 人 员 在 未 经 允许 的 情况 下 ， 就 把 自己 电脑 里 的 字体 上 传 到 网 站 上 ， 注 可 内 经 懈 : 下 一 

节 我 们 马上 会 介绍 到 ， 字 体 公司 对 这 两 个 问题 都 给 出 了 解决 方案 。 


CSS3 通 过 @font-face 为 浏览 器 增加 了 强大 的 字体 功能 。 使 用 这 个 功能 的 步 又 如 下 : 
(1) 把 字体 上 传 到 网 站 (或 者 为 了 支持 不 同 的 浏览 器， 上 传 该 字体 的 多 个 不 同 版 本 ); 
(2) 使 用 @font-face 命 令 注册 每 一 个 想 要 在 样式 表 中 使 用 的 字体 ; 
(3) 在 样式 表 中 使 用 注册 过 的 字体 ， 就 像 使 用 Web 安 全 字体 一 样 使 用 字体 名 字 ; 
(4) 浏览 器 在 遇 到 使 用 Web 字 体 的 样式 表 时 ， 就 会 把 字体 下 载 到 页 面 和 图 片 的 临时 缓存 中 。 
后 就 在 你 的 网 页 或 网 站 中 使 用 该 字体 ( 如 图 6-13 所 示 )。 如 果 其 他 网 页 也 要 使 用 相同 的 字体 ， 
则 需要 分 别 注册 并 提供 自己 的 字体 文件 。 























a Zero & Zero ls 图 6-13 ， 修改 后 的 启 示 录 页 面 

= 使 用 J 

RS- 轩 是 免费 的 ，6.4.3 节 将 介绍 怎么 
€ C&C © file///c JHTMLS/Chapter 2008/FontTest/ApocalypsePage, Revised.hllml | 从 Font Squirrel 取 得 导 这 些 字 体 





加 THE WORD Cu Ww 


RIGHT NOW, you're probablyfeeling prettygood. Afterall, life inthe developed 
worldis comfortable-probablymore comfortable thanit's beenforthe average 


humanbeingthroughout allofrecorded history. 


Butdon'tgettoosmug.There's stillplenty of 
horrificways it could allfallapart. Inthis article, 
you'lllearn about afew of ourfavorites. 








Skeptics suggestthatthe Mayancalendarsimply 
rollstoanew 5,126-yeareraafter2012,and 
doesn'tactuallypredictalife-ending 
apocalypse. Butgiventhatthelong-dead 
Mayans were wrong about virtually everything 
else,whyshouldwetrustthemonthis? 





Willyou be thelast person standing 
ifone of these apocalyptic 
SCenarios plays Out? 


NotouiteasfrightenlngasaVampireTakeoverorLiving-DeadTakeover arobot 
rebellionis stilladisduietingthought. We are already outnumberedby our 
technologicalgadgel:s,and even Bill Gatesfearsthe dayhisJapaneserobot slave 
turnshimoverbythelanklesandasks (ina suitablyrobotic voice)"Who'syour 
anddiinrow2" 
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注意 ”严格 来 讲 ，@font-face 不 是 新 功能 。 0 时 就 定义 了 这 个 命令 ， 但 由 于 浏览 器 开发 商 
意见 不 统一 ，CSS2.1 又 把 它 给 删除 了 。 现 在 ，CSS3 又 开始 致力 于 把 @font-face 打 造成 一 
个 普 适 的 标准 。 


接 下 来 几 小 节 分 别 讨论 上 述 几 个 步骤 。 


6.4.1 Web 字 体格 式 


管 目 前 所 有 浏览 器 都 支持 @font-face， 但 它们 支持 的 字体 文件 格式 却 不 一 样 。Internet 
ee 已 经 支持 @font-face 很 多 年 了 ,但 它 只 支持 一 种 字体 文件 格式 EOT ( Embedded 
OpenType )。 这 种 格式 有 很 多 长 处 ， 比 如 它 支持 通过 压缩 减少 字体 文件 大 小 ， 也 支持 严格 的 网 站 
许可 ， 从 而 不 会 被 其 他 网 站 盗用 。 可 是 ，EOT 格 式 一 直 没 有 发 展 起 来 ， 除 了 IE 之 外 ,其 他 浏览 
都 不 支持 它 。 直 至 最 近 ， 其 他 浏览 器 都 还 是 支持 桌面 应 用 中 常见 的 字体 格式 ， 即 TTF ( TrueType ) 
和 OTF ( OpenType PostScript )。 而 除了 上 述 几 种 格式 外 , 还 有 另外 两 种 字体 格式 : SVG 和 WOFF。 
表 6-3 列 出 了 所 有 这 些 字 体格 式 。 














表 6-3 ”以 入 字体 格式 














格 式 说 明 适用 环境 

WOFF (Web Open Font Format) ”唯一 一 个 面向 未 来 的 字体 格式 。 比 较 新 的 浏 ”I 王 9、Firefox 3.6 和 Chrome 6 及 更 高 
览 器 支持 它 ee 

EOT (Embedded OpenType) 微软 特有 的 格式 ,除了 下 没有 别 的 浏览 器 支持 ”下 (IE9 之 前 ) 

TTF(TureType)、OTF(OpenType ”桌面 应 用 中 常用 的 字体 格式 Android 操 作 系 统 的 移动 设备 

PostScript) (可 选 的 ) 非 正 浏 览 器 ， 比 如 


0 Chrome、Safari 和 Opera 
SVG (Scalable Vector Graphics) ”一 种 用 于 字体 的 多 功能 图 形 格式 ， 效 果 并 不 ”旧版 的 移动 版 Safari (iOS 4.2 之 前 ) 
是 太 好 (显示 速度 慢 ， 而 且 文本 质量 不 高 ) 和 (可 选 的 ) 使 用 Android 操 作 系 
统 的 移动 设备 

记 住 : 要 用 6@font-face 功 能 并 且 支 持 大 部 分 浏览 需 ， 需 要 将 字体 制作 成 多 种 格式 。 最 佳 实践 
方案 是 包含 一 个 WOFF 文 件 (在 现代 浏览 器 上 性 能 最 好 )、 一 个 EOT 文 件 (兼容 旧版 IE ) 以 及 一 个 
TTF 或 者 OTF 文 件 (兼容 Android 和 旧版 的 非 正 浏览 器 ),。 最 好 再 为 旧版 的 Pad 和 iPhone 提 供 一 个 低 
质量 的 SVG 文 件 。 

如 果 觉 得 这 样 要 维护 太 多 的 字体 文件 , 可 以 缩减 到 两 个 文件 并 且 可 以 支持 大 部 分 浏览 
个 TTF 或 者 OTF 格 式 的 (任何 一 种 都 行 ) 和 一 个 EOT 格 式 的 。 这 不 能 兼容 所 有 的 浏览 器 ， 但 可 以 
为 网 站 的 绝 大 部 分 用 户 提 供 漂 亮 的 字体 。 








二 





















































注意 ”幸运 的 是 ,字体 开发 商 和 在 线 字体 服务 通常 会 提供 所 需 的 全 部 4 种 格式 ,因此 可 以 确保 最 
大 程度 的 浏览 器 支持 。 
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6.4.2 ”给 网 站 找 个 字体 


现在 我 们 知道 从 哪里 可 以 获取 网 站 所 需 的 字体 文件 。 要 得 到 所 需 的 格式 ， 有 两 种 可 能 : 

口 下 载 一 种 免费 网 络 字体 。 采 用 这 种 方式 时 ， 不 用 担心 许可 问题 ， 不 用 破 费 了 。 

口 将 已 有 的 桌面 字体 转化 为 网 络 字体 。 这 种 方式 可 以 让 我 们 使 用 钟爱 的 字体 。 这 也 能 实现 
一 致 性 。 比 如 ， 如 果 公 司 已 经 有 一 套 字 体 标 准 ,， 用 于 logo、 备 忘 录 和 出 版 物 ， 那 么 在线 上 
用 相同 的 排版 样式 就 很 合理 。 但 是 ， 可 能 需要 研究 一 下 如 何 解决 许可 问题 ， 可 能 还 需要 
支付 一 点 费用 。 

接 下 来 几 节 我 们 会 介绍 这 两 种 方式 。 



































消除 异常 
即使 你 规 规 逢 和 矩 地 提供 了 必要 的 字体 格式 , 仍然 免不了 会 遭遇 一 些 异 常情 况 。 下面 给 出 了 

在 使 用 Web 字 体 时 偶尔 会 出 现 的 问题 。 

口 很 多 字体 在 古老 但 依然 有 很 多 用 户 的 Windows XP 中 看 起 来 并 不 舒服 ， 因 为 Windows XP 

通常 会 禁用 反 锯齿 功能 。( 没有 打开 反 锯 齿 功 能 时 的 字体 看 起 来 像 是 “ 乍 毛 鸡 ”。) 

口 有 人 反映 某 些 浏览 器 (或 操作 系统 ) 在 显示 某 些 谈 入 字体 时 有 问题 。 

口 在 有 些 浏览 器 中 会 出 现 所 谓 的 FOUT ( 即 Flash of Unstyled Text ) 问题 。 在 需要 几 秒 钟 下 
载 菜 种 谋 入 字体 的 情况 下 , 页 面 会 首先 使 用 备用 字体 呈现 文本 , 然后 再 使 用 嵌入 字体 重 
新 泻 染 。 老 版 本 的 Firefox 中 最 常见 这 个 问题 ,如 果 这 对 你 而 言 已 经 成 了 必须 解决 的 问题 ， 
可 以 使 用 谷歌 提供 的 一 个 JavaScript 库 ， 利 用 它 可 以 自 定 义 未 加 载 完成 时 使 用 的 样式 ， 
完全 控制 泻 染 过 程 (参见 http://tinyurl.com/font-loader )。 

虽然 在 使 用 Web 字 体 时 偶尔 会 遇 到 这 些小 问题 ,但 新 版 本 的 浏览 器 已 经 逐步 把 它们 都 解决 

了 。 比 如, Firefox 为 了 消除 FOUT 问 题 , 会 在 使 用 备用 字体 之 前 , 先 等 待 3 秒 钟 以 下 载 谋 入 字体 。 








6.4.3 ”从 Font Squirrel 获 取 免 费 字 体 


获取 免费 字体 最 好 的 地 方 就 是 Font Squirrel 网 站 www.fontsquirrel.com， 它 提供 了 大 概 1000 种 
免费 使 用 的 字体 ( 见 图 6-14 )。 

















el “图 6-14: Font Squirrel 提 供 了 多 
9 种 搜索 字体 的 方式 ， 但 最 有 效 
的 方式 还 是 直接 输入 想 要 的 字 
体 名 称 ( 比如 Calligraphic 、 
Novelty、Retro ) 。 最 棒 的 是 ， 
这 里 的 大 部 分 字体 你 都 可 以 免 
费用 在 任何 你 需要 的 地 方 一 一 
在 个 人 电脑 上 创建 文档 ,或 者 
在 Web 上 构建 一 个 网 页 
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Click here for a more Download the Font 
detailed preview of the font font file category 











在 Font Squirrel 找 到 喜欢 的 字体 后 ， 查 看 一 下 下 面 的 小 图 标 ( 见 图 6-15 )， 这 些 图 标 指明 了 字 
体 的 许可 情况 。 实 心 图 标 表 示 该 字体 可 以 在 特定 范围 内 使 用 ， 空 心 图 标 则 表示 不 能 。 


图 6-15: 前 两 个 图 标 是 最 重要 的 ， 
5 ondloroy Browm Sn BCDIES ne 











































































































i Pe Wm Webo 事实 上 Font Squirrel 上 所 有 
| 的 字体 都 包含 这 两 个 图 标 。 接 下 
This font cannot be included in a custom application 来 两 个 图 标 表示 字体 是 否 可 以 用 
This font cannot be embedded in an eBook 于 电子 书 和 自 定义 应 用 程序 。 
nS font allows online use ( 如 果 不 确定 图 标 是 什么 意思 , 可 
This font allows desktop use 以 点 击 看 一 下 ) 











核实 了 字体 的 许可 细节 之 后 (在 Font Squirrel 上 都 是 这 样 )， 下 一 步 就 是 进一步 查看 字体 。 点 
击 字 体 文本 切换 到 字体 预览 页 面 , 这 里 显示 了 字体 的 每 个 字母 ,并 可 以 让 你 输入 一 些 文本 来 测试 。 

如 果 喜 欢 这 个 字体 的 话 ， 最 后 一 步 就 是 下 载 了 。 你 可 能 会 下 载 到 一 个 包含 了 Web 字 体 的 完整 
字体 包 ， 但 更 有 可 能 的 是 下 载 到 一 个 TTF 或 OTF 文 件 ， 然 后 自己 制作 字体 包 ， 这 取决 于 所 下 载 的 
字体 。 这 个 问题 的 出 现 很 大 程度 上 是 因为 字体 许可 的 混乱 。 很 多 字体 使 用 SIL OPEN Font License 
许可 ， 它 人 允许 用 户 免 费 使 用 字体 ， 但 不 允许 像 Font Squirrel 这 样 的 服务 商 将 字体 重新 打包 。 幸 运 
的 是 ， 自 己 创建 字体 包 很 简单 ， 并 且 完 全 合法 。 下 一 节 我 们 会 介绍 怎么 做 。 









































在 本 地 计算 机 中 使 用 字体 
我 能 不 能 在 打印 文档 时 也 使 用 网 页 中 的 字体 ? 
如 果 你 在 自己 的 网 站 中 找到 并 使 用 了 一 款 非常 棒 的 字体 ， 也 可 以 在 本 地 计算 机 中 使 用 它 。 
例如 ， 可 以 用 这 种 字体 在 Illustrator 中 创建 一 个 logo。 或 者 ， 你 们 公司 想 把 它 用 在 广告 、 产 品 手 
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册 或 财务 报告 中 ， 打 印 出 来 。 

目前 的 Windows 和 Mac 计 算 机 都 支持 TrueType ( .ttf) 和 OpenType ( .otf ) 字体 。 我 们 下 载 到 
的 每 个 字体 包 中 ,通常 都 会 包含 其 中 一 种 格式 大 多 数 时 候 是 TrueTyep 格 式 。 要 在 Winddows 
中 安装 该 字体 ， 先 把 它 从 压缩 文件 中 解压 出 来 ， 然 后 在 字体 文件 上 单 击 右键 ， 选 择 安装 即 可 。 
(可 以 一 次 选择 安装 多 个 字体 文件 。) 在 Mac 中 ， 双 击 字 体 文件 打开 Font Book 工 具 ， 然后 再 单 击 
Install Font ( 安装 字体 ) 按钮 。 





6.4.4 准备 一 个 网 络 字体 


使 用 Font Squirrel， 可 以 将 标准 的 桌面 TTF 或 OTF 字 体 文件 转化 为 可 用 于 任何 网 页 的 Web 字 
体 。 任 何 从 Font Squirrel 上 下 载 的 免费 字体 都 可 以 这 样 做 。 你 也 可 以 用 自己 电脑 上 的 字体 来 做 ， 
但 重点 是 要 理解 许可 问题 ， 这 是 你 首先 要 面 对 的 问题 (参见 下 文 附注 )。 未 经 允许 在 网 站 上 使 用 
普通 的 桌面 字体 是 可 能 侵犯 版 权 的 一 一 如 果 字 体 厂商 要 求 Font Squirrel 将 其 字体 列 和 人 黑 名 单 ， 你 
就 再 也 不 能 使 用 桌面 到 Web 的 字体 转化 了 。 























理解 字体 许可 的 规则 

普通 的 用 于 桌面 软件 的 字体 不 是 免费 的 。 将 你 电脑 上 的 字体 用 于 网 站 不 太 合适 ,除非 你 获 
得 了 字体 开发 者 的 明确 许可 。 

比如 , 微软 和 苹果 会 为 他 们 的 操作 系统 和 应 用 软件 中 用 到 的 字体 支付 费用 , 这 样 你 才能 使 
用 它们 ， 比如， 用 文字 处 理 软件 写 一 篇 新 闻 通 讯 稿 。 但 是 ,这 种 许可 并 没有 允许 你 把 这 些 字体 
放 到 网 络 服务 器 上 并 在 网 页 中 使 用 它们 。 

如 果 你 有 一 个 喜欢 的 字体 并 想 知 道 是 否 需 要 付费 使 用 ,唯一 的 办 法 就 是 联系 开发 该 字体 的 
公司 或 个 人 。 一些 字体 开发 者 会 基于 网 站 的 访问 量 收取 许可 费 , 其 他 一 些 开发 者 会 收取 极 少 的 
费用 或 不 收费 ,但 需要 你 满足 一 些 条 件 ( 比如 ， 在 网 站 中 包含 一 段 关 于 所 用 字体 的 小 字 说 明 ， 
或 者 你 的 网 站 是 非 营 利 性 的 )。 还 有 一 个 附带 好 处 : 技术 精湛 的 字体 开发 者 经 常 提供 针对 Web 
展现 优化 过 的 字体 。 


获得 某 个 字体 的 使 用 许可 后 , 就 可 以 使 用 Font Squirrel 方 便 的 Web 字 体 生成 器 来 转化 它 。 点击 
Font Squirrel 上 方 的 Webfont Generator 标 签 就 可 以 访问 生成 器 ,或 者 直接 访问 www.fontsquirrel.com/ 
fontface/generator， 图 6-16 展 示 了 操作 步 又。 


























息 Font Squirrel | Create Your Own @font-face Kits - Windows Internet Explorer 
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图 6-16: 首先 ， 点 击 Add Fonts 
从 电脑 上 传 一 个 字体 文件 ( 第 
1 步 ) ， 勾 选 “Yes, the fonts Tm 
uploading are legally eligible for 
web embedding”,， 表示 你 接受 
他 们 的 许可 要 求 ， 如 前 文 所 介 
绍 的 那样 ( 第 2 步 ) 。 最 后 ， 

点 击 Download Your Kit ( 第 3 


步 ) 


























下 载 字 体 包 之 后 , 得 到 的 是 一 个 包含 很 多 文件 的 压缩 文件 。 例 如， 如果 下 载 Chantelli Antiqua 


字体 ， 解 压 后 可 以 得 到 如 下 文件 : 


Bernd Montag License.txt 
Chantelli Antiqua-webfont.eot 
Chantelli Antiqua-webfont.svg 
Chantelli Antiqua-webfont.ttf 
Chantelli Antiqua-webfont.woff 
demo.html 

stylesheet.css 


其 中 的 文本 文件 (Bernd Montag License.txt ) 包含 授权 许可 信 ， 











息 ， 大 意 是 你 可 以 免费 使 用 ， 


但 不 能 销售 该 字体 。 而 4 个 Chantelli Antiqua-webfont 文 件 就 是 4 种 不 同 的 文件 格式 。( 根据 选择 的 
字体 不 同 ， 还 可 能 包含 针对 不 同 字形 ， 比 如 粗 体 、 和 斜体 和 纯 黑 体 等 的 文件 。) 最 后 ，stylesheet.css 
中 包含 着 将 该 字体 应 用 到 网 页 的 样式 表 规 则 ， 而 demo.html 则 是 一 个 显示 该 字体 的 示例 页 面 。 


要 使 用 Chantelli Antiqua 字 体 , 首先 要 把 所 有 Chantelli_Antiqua-webfont 文 件 复 























判 到 网 页 所 在 的 





文件 夹 中 。 然 后 ， 就 是 注册 该 字体 ， 以 便 在 样式 表 使 用 它 。 为 此 ， 需 要 在 样式 表 的 开头 写 一 个 复 


杂 的 @font-face 规 则 ， 如 下 所 示 ( 带 着 行 号 便于 下 文 说 明 ): 





1 @font-face { 
2 font-family: 'ChantelliAntiquaRegular'; 
3 src: url('Chantelli Antiqua-webfont.eot'); 
4 src: local('Chantelli Antiqua'), 
5 url('Chantelli Antiqua-webfont.woff') format('woff'), 
6 url('Chantelli Antiqua-webfont.ttf') format('truetype'), 
7 url('Chantelli Antiqua-webfont.svg') format('svg'); 
8 } 
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为 理解 这 条 规则 都 做 了 什么 ， 下 面 我 们 逐 行 解释 。 

口 第 1 行 : efont-face 是 正式 注册 字体 的 工具 , 注册 之 后 才能 在 样式 表 的 其 他 地 方 使 用 该 字体 。 

口 第 2 行 : 给 这 款 字 体 起 个 名 字 , 具体 叫 什 么 取决 于 你 ; 将 来 使 用 该 字体 时 要 用 到 这 个 名 字 。 

口 第 3 行 : 必须 首先 注册 EOT 格 式 的 字体 文件 ， 这 样 IE 不 理解 其 他 规则 也 没有 关系 ， 只 要 忽 
略 其 他 格式 就 行 了 。 这 里 的 url() 函 数 用 于 告诉 浏览 器 在 当前 位 置 下 载 另 一 个 文件 。 如 果 
把 字体 放 在 了 网 页 所 在 的 文件 夹 中 ,那么 在 此 只 要 给 出 字体 文件 名 即 可 。 

口 第 4 行 : 接 下 来 就 要 使 用 local() 函 数 , 这 个 函数 告诉 浏览 器 这 种 字体 的 名 字 , 如 果 恰 好 访 
客 的 电脑 中 安装 了 这 种 字体 ， 浏 览 器 就 会 使 用 它 。 不 过 ,个 别 情况 下 这 个 函数 也 会 导致 
问题 ( 比如 ,在 Mac OS 义 中 ,根据 访客 字体 的 安装 位 置 不 同 ， 可 能 显示 一 个 安全 对 话 框 ; 
男 外 ， 也 可 能 会 加 载 男 一 个 只 是 同名 的 字体 。) 为 此 ，Web 设 计 人 员 有 时 候 会 在 此 传人 一 
个 明显 瞎 编 的 字体 名 ， 让 浏览 器 在 本 地 找 不 到 该 字体 。 比 如 ， 有 人 会 使 用 一 个 没有 意义 
的 笑脸 符号 ， 如 local(' @ ')。 

口 第 5 行 ~ 第 7 行 : 最 后 一 步 是 告诉 浏览 器 可 以 使 用 的 其 他 文件 格式 。 如果 字体 包 里 有 WOFF 
字体 文件 ， 建 议 把 它 放 在 第 一 位 ， 因 为 这 种 格式 的 字体 质量 最 高 。 然 后 ， 再 注册 TTF 或 
OTF 文 件 ， 最 后 注册 SVG 文 件 。 































































































提示 。 当然， 你 完全 可 以 不 用 自己 动手 写 @font-face 规 则 ( 也 不 必 理 解 上 面 介绍 的 所 有 技术 细 
节 )。 只 要 把 Web 字 体 包 中 包含 的 stylesheet.css 文 件 中 的 规则 复制 到 页 面 中 即 可 。 


使 用 @font-face 注 册 了 字体 之 后 ,就 可 以 在 样式 表 使 用 该 字体 了 。 这 时 ,只 要 使 用 font-family 
属性 ， 然 后 指定 之 前 用 efont-face 给 字体 起 的 名 字 【( 第 2 行 ) 即 可 。 下 面 是 一 个 例子 ， 删 除了 
@font-face 规 则 的 大 部 分 代码 : 

@font-face { 
font-family: 'ChantelliAntiquaRegular’; 
} 


body { 
font-family: 'ChantelliAntiquaRegular’; 























这 条 规则 为 整个 网 页 应 用 了 新 注册 的 字体 。 当 然 , 只 通过 元 素 或 类 名 来 缩小 应 用 字体 的 范围 
也 没有 问题 。 唯 一 要 注意 的 是 ， 必 须 在 使 用 字体 之 前 ， 先 使 用 efont-face 注 册 字 体 。 把 上 面 的 步 
又 改 成 先 使 用 后 注册 ,将 导致 无 法 使 用 字体 。 


6.4.5 ”用 谷歌 更 简单 地 使 用 Web 字 体 


如 果 你 想 使 用 新 奇 的 字体 ， 而 又 不 想像 前 面 介 绍 的 那么 麻烦 ， 还 可 以 使 用 谷歌 提供 的 Web 字 
体 解 决 方案 。 这 个 项 目 名 叫 Google Fonts ( 原来 叫 Google Web Fonts )， 其 中 包含 很 多 可 以 自由 使 
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用 的 字体 。 We Fonts， 不 必 担 心 字体 格式 ， 因 为 谷歌 会 检测 用 户 的 浏览 器 并 自动 发 送 正 
确 的 字体 文件 。 你 只 需要 添加 一 个 谷歌 生成 的 样式 文件 。 

要 在 页 面 中 使 用 谷歌 的 Web 字 体 ， 大 致 要 遵循 下 列 步 又。 

(1) 在 浏览 需 中 打开 www.google.comyfonts。 

谷歌 会 列 出 很 多 字体 来 ( 图 6-17 )。 






































筛选 选项 排序 方式 图 6-17: 谷歌 一 直 坚 持 不 懈 
= 。 地 扩充 这 个 字体 列表 。 在 查 

CPE = 找 字体 时 ， 可 能 要 先 选择 排 
| 序 方式 ， 指 定 筛选 选项 ( 在 

Google Fonts Re 周转 位置) 。 例 如 ， 可 以 按 























照 字 母 顺 序 排序 ， 或 者 把 最 
受 欢 迎 的 字体 排 在 前 面 ; 而 

选 选 项 包括 只 显示 衬 线 
( serif ) 、 非 衬 线 ( sans-serif ) 
或 手写 ( handwritten ) 字体 
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(2) 在 页 面 顶部 ， 单 击 一 个 选项 卡 ( Word、Sentence 或 Paragraph )， 选 择 预览 字体 的 方式 。 

如 果 你 想 找 一 款 字 体 用 在 标题 上 ， 那么 可 以 选择 Word 或 Sentence， 看 看 一 个 单词 或 一 行 字 的 
效果 。 如 果 你 想 找 一 款 正文 字体 ， 那么 就 该 选择 Paragraph， 体 验 一 下 整 段 文本 的 效果 。 无 论 选择 
哪 种 预览 方式 ， 都 可 以 自己 手工 输入 一 些 文本 ， 并 设置 字体 大 小 。 

(3) 设 定 搜索 选项 

如 果 你 知道 自己 要 找 什 么 字体 ， 可 以 在 搜索 框 中 输入 该 字体 的 名 字 。 否 则 ,就 要 不 断 滚动 页 
面 ， 多 花 点 时 间 。 为 了 节省 时 间 ， 最 好 先 选 择 一 种 排序 方式 ， 并 添加 一 些 筛选 设置 ( 比如， 要 想 
只 显示 最 受 欢迎 的 粗 体 非 衬 线 字体 ， 可 以 将 排序 方式 设 定 为 Popularity， 在 筛选 设置 中 只 选择 
Sans-Serif， 而 在 Thickness 中 设置 较 粗 的 笔画 )。 图 6-17 展 示 了 设置 这 些 选项 的 地 方 。 

(4) 找到 一 球 满意 的 字体 后 ， 单 击 Pop out。 

谷歌 会 弹出 一 个 新 窗口 ， 其 中 包含 该 字体 的 详细 说 明 及 每 个 字符 的 展示 。 
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(5) 如 果 你 喜欢 该 字体 ， 单 击 Quick-use 取 得 使 用 它 的 信息 。 

然后 ,谷歌 会 给 出 使 用 该 字体 的 代码 。 包 括 一 个 样式 表 链 接 ( 必须 放 到 你 的 网 页 中 ) 和 一 个 
使 用 该 字体 的 样式 规则 示例 。 

(6) 把 样式 表 链 接 添 加 到 网 页 中 。 

比如 ， 你 选择 了 Metrophobic 字 体 ， 那 么 应 该 把 谷歌 给 出 的 以 下 链接 放 在 <head> 部 分 中 : 

<link href="http://fonts.googleapis.com/css?family=Metrophobic" rel="stylesheet"> 

这 个 样式 表 用 于 注册 字体 ， 使 用 了 @font-face， 因 此 你 就 不 用 自己 注册 了 。 最 重要 的 是 , 谷 
歌会 负责 提供 相应 的 字体 文件 ， 而 你 就 不 必 再 往 自 己 的 网 站 中 上 传 任何 东西 了 。 



































注意 ” 别 忘 了 把 谷歌 字体 样式 表 的 链接 放 到 其 他 样式 表 链 接 的 前 头 。 这 样 ， 其 他 样式 就 可 以 使 
用 谷歌 的 Web 字 体 。 


(7) 使 用 选择 的 字体 〈 指定 字体 名 )。 
例如 , 要 在 标题 中 使 用 刚刚 注册 的 Metrophobic 字 体 , 同时 再 添加 儿 个 后 备 , 以 防 浏览 器 下 载 
字体 文件 失败 ， 可 以 像 下 面 这 样 写 样式 规则 : 
hi { 
font-family: 'Metrophobic', arial, serif; 


} 











创建 字体 集合 

以 上 步骤 是 取得 字体 标记 的 最 简便 方式 。 不 过 , 通过 创建 字体 集合 , 还 可 以 选择 更 多 字体 。 

字体 集合 就 是 一 种 打包 注册 多 种 字体 的 方式 。 要 创建 字体 集合 , 只 要 单 击 每 款 字 体 旁 边 的 
Add to Collection 按钮 即 可 。 每 添加 一 种 字体 ， 该 字体 名 就 会 出 现在 页 面 底部 的 蓝 色 背 景 
< 芭 

选择 完 所 有 字体 后 ， 单 击 页 面 底部 的 Use 按钮 ， 就 可 以 看 一 个 与 单 击 Quick-use 之 后 看 到 
的 类 似 的 页 面 ， 只 不 过 此 时 页 面 中 显示 的 是 支持 字体 集合 中 所 有 字体 的 样式 表 链 接 。 

创建 了 字体 集合 后 ， 还 可 以 使 用 页 面 右上 角 的 两 个 按钮 。 单 击 Bookmark your Collection 
(看 起 来 像 一 蕉 链条 的 那个 ) 可 以 在 浏览 器 中 创建 一 个 书签 ， 以 便 将 来 对 字体 集合 进行 调整 。 
单 击 Download your collection ( 看 起 来 像 一 个 向 下 的 箭头 ) 可 以 把 字体 下 载 到 本 地 计算 机 中 ， 
随后 可 以 安装 这 些 字 体 并 用 于 文档 打印 。 


提示 还 在 找 完美 字体 ?流行 字体 订阅 网 站 ， 如 http://fonts.com 和 http://typekit.com， 提供 了 成 千 
上 万 种 超 高 品质 的 字体 ， 它们 来 自 一 些 非凡 的 字体 开发 商 ， 比如 Linotype 和 Monotype。 对 
字体 病 迷 的 Web 开 发 者 们 会 为 此 每 年 支付 10 到 100 美 元 ， 要 在 访问 量 巨大 的 超级 网 站 上 使 
用 ， 费 用 还 会 更 多 。 
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6.4.6 ”多 栏 文 本 


使 用 自 定义 字体 并 不 是 CSS3 在 文本 显示 方面 唯一 的 创新 。 多 栏 文本 也 是 CSS3 的 一 个 模块 ， 
用 于 灵活 地 显示 长 篇 内 容 ， 提 高 可 读 性 。 
要 实现 多 栏 广 本， 可谓 易如反掌 。 而 且 ， 有 两 种 方式 可 供 选择 。 第 一 个 选择 是 使 用 
column-count 属 性 来 设置 想 要 的 栏 数 ， 比 如 : 
.Content { 
text-align: justify; 


column-count: 3; 


} 
在 本 书写 作 时 , 只 有 IE10 和 IE11 支 持 column-count 属 性 。 虽然 Chrome、Firefox、Safari 和 Opera 
也 支持 多 栏 文本 ,但 需要 使 用 带 开发 商 前 级 的 属性 ， 如 下 所 示 : 


.Content { 
text-align: justify; 
-moz-column-count: 3; 
-webkit-column-count: 3; 
column-count: 3; 


} 

这 种 创建 多 栏 的 方式 适合 固定 布局 。 如 果 网 页 区 域 会 随 着 浏览 器 窗口 缩放 而 变化 , 那么 这 些 
ee 让 人 们 无 法 阅读 。 此 时 , 最 好 的 方法 是 不 要 设置 栏 数 , 而 是 使 用 column-width 
属性 告诉 浏览 器 每 一 栏 有 多 宽 : 


.Content { 
text-align: justify; 
-moz-column-width: 10em; 
-webkit-column-width: 10em; 
column-width: 10em; 





















































这 样 ， 浏 览 絮 就 会 根据 需要 创建 栏 ， 以 填充 有 效 的 空间 (参见 图 6-18 )。 


注意 虽然 在 指定 栏 宽 时 可 以 使 用 像素 单位 ,但 使 用 em 单位 才 是 首选 。 US 与 当前 字体 
大 小 是 匹配 的 ， 所 以 如 果 网 页 访客 调 大 了 浏览 器 中 的 字号 ， 那 么 栏 宽 也 会 按 比例 加 大 。 
oo 
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our favorites. ~“ 








时 


6-18: 在 窗口 很 窄 的 情况 下 ( 上 )， 
Firefox 会 只 显示 一 栏 。 随 着 窗口 变 
宽 ， 栏 数 也 会 相应 增加 (下 ) 























Skeptics ET that the Mauan 
calendar simply rolls to a new 
5,126-year era after 2012, and 
doesn't actually predict a 
life-ending apocalypse. But given 
that the long-dead Mayans were 
wrong about virtually everything 
else, why should we trust them on 
this? 


加 





ROBOT TAKEOVER 
Not quite as frightening as a 
Vampire Takeover or Living-Dead 
Takeover, a robot rebellion is still a 
disquieting thought. We are already 
outnumbered by our technological 
gadgets, and even Bill Gates fears 
the day his Japanese robot slave 
turns him over by the ankles and 
asks (in a suitably robotic voice) 
"Who's your daddu now?” 





66 We don't know how the 











Wniverse started. so we can't - 
orc cr odd ourormocrco 一 cornrcno 一 wor 一 woroos 攻 
疆 by our technological storms, widespread food 











Will you be the last person standing 
i one of these apocalyptic 
scenarios plays out? 


But don't get too smug. 
There's still plenty of 
horrific ways it could all 
fall apart. In this article, 
you'l| learn about a few 
of our favorites 





Skeptics suggest that 
the Mayan calendar 
simply rolls to a new 
5,126-year era after 2012, 


and doesn't actually 
predict a life-ending 
apocalypse. But given 
that the long-dead 


gadgets, and even Bill 
Gates fears the day his 
Japanese robot slave 
turns him over by the 
ankles and asks (in a 
suitably robotic voice) 
"Who's your daddy now?" 


66 We don't know 
how the universe 
started so We 
cant be sure it 
won't just end. 
maybe today. yy 





We don't know how the 
universe started, so we 
can't be sure it won't just 


shortages, and surly air 
conditioning repairmen. 





Some time in the future, 
a lethal virus could 
strike. Predictions differ 
about the source of the 
disease, but candidates 
include monkeys in the 
African jungle, 
bioterrorists, birds and 
pigs with the flu, warriors 
from the future, an alien 
race, hospitals that use 
too many antibiotics, 
vampires, the CIA, and 
unwashed brussel 
sprouts. Whatever the 
source, it's clearly bad 
news. 


These apocalyptic predictions do not refiect the views of the author: 
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CSS3 还 提供 了 一 些 用 于 装饰 分 栏 样式 的 属性 。 可 以 用 column-gap 调 整 分 栏 之 间 的 间隔 。 也 可 
以 用 column-rule 来 添加 一 条 垂直 的 分 隔 线 ， 这 个 属性 值 的 三 项 分 别 代 表 线 条 的 宽度 、 样 式 和 颜 
色 (就 像 border 属 性 )。 下 面 这 个 例子 添加 一 条 红色 的 1 像素 宽 的 分 隔 线 : 


-webkit-column-rule: 1px solid red; 
-moz-column-rule: 1px solid red; 
column-rule: 1px solid red; 


也 可 以 用 column-span 属 性 让 图 片 或 其 他 元 素 横 跨 多 列 。column-span 默 认 值 是 1， 意味 着 这 个 
元 素 锁 定 在 它 出 现 的 那 一 列 。 其 他 的 值 只 有 all， 让 元 素 横 跨 所 有 列 的 总 宽度 。 目 前 还 没有 办 法 
让 元 素 横 跨 指 定数 量 的 列 ( 1 列 和 全 部 列 除外 )。 
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.SpanFigure { 


} 


-moz-column-span: all; 
-webkit-column-span: all; 
column-span: all; 


面 这 个 例子 ( 见 图 6-19 ) 让 一 张 图 片 横 跨 所 有 和 列 : 











多 门 Apocalypse Now x\ 











GC Q ApocalypsePage_Revised.html 


RIiGHT NOW, you're probably 
feeling pretty good. After all, 
life in the developed world is 
comfortable-probably more 


comfortable than it's been 
for the average human 
being throughout all of 
recorded history. 





JW you be the last person standing if one of these apocalyptic 


scenarios plays out? 


But dont get too smug. 
There's still plentu of horrific 
waus it could all fall apart. 
In this article, you'll learn 
about a few of our favorites. 


Skeptics suggest 下 | the 


Mauan calendar simply rolls 





We don't know 
universe started, so we 
cant be sure it wont just 
end, maybe today, and 
maybe with nothing more 
exciting than a puff of anti- 
matter and a slight fizzing 





图 6-19: 这 个 多 列 页 面 在 列 之 间 
三 用 了 一 个 分 隔 线 , 并 让 一 张 图 片 
Fe 横 跨 所 有 列 





< 

















如 果 图 片 样式 的 float 属 性 为 非 none 的 值 ， 那 








具备 浮动 于 布局 和 它 所 包含 的 任何 列 之 外 的 能 力 。 


注意 ”如果 需要 在 宽 布局 上 打 散 文本 以 方便 阅读 ， 多 列 就 很 合适 。 但 是 ， 

A 因为 目前 还 没有 办 法 让 列 的 高 度 适 配 浏 览 器 窗口 的 高 度 。 因 此 ， 如 果 
读者 就 需要 从 顶部 滚动 到 底 人 卖 第 
如 果 内 容 超 过 两 屏 ， 还 


篇 宛 长 的 文章 分 成 3 列 ， 
动 到 底部 读 完 第 二 列 ， 然 后 读 第 三 列 。 





么 这 种 方法 将 无 效 。 这 是 因为 浮动 的 图 片 已 经 


如 果 内 容 非 常 多 的 话 ， 多 


一 列 ， 然 后 回 到 顶部 ， 再 滚 
是 用 传统 的 一 列 式 滚动 吧 。 
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CSS3 与 响应 式 Web 设 计 


WX 页 设计 师 要 把 内 容 放 到 HTML 页 面 中 ， 首 先 会 面临 一 个 挑战 。 平 面 设计 师 都 会 假定 将 
来 的 文档 如 何在 纸 上 排 版 , 读者 会 怎么 阅读 , 但 网 页 就 宽松 多 了 , 而 且 没 有 一 定之 规 。 
用 户 的 浏览 器 ( 以 及 个 性 化 设置 ) 决定 了 同一 个 HTML 页面， 是 被 挤 到 一 个 小 小 的 窗口 里 ， 还 是 
孤零零 地 车 浮 在 一 个 巨大 的 屏幕 上 。 这 就 是 网 页 设计 师 要 面临 的 布局 风险 。 在 一 个 窗口 里 看 起 来 
几 近 完美 的 布局 ， 到 了 另 一 个 比例 不 同 的 窗口 里 ， 马 上 显得 粗制滥造 ， 丑 陋 不 堪 。 

今天 , 这 种 不 确定 的 风险 有 增 无 减 。 网 页 设计 师 不 光 要 考虑 桌面 计算 机 中 浏览 右 窗 口 的 不 同 大 
小 , 还 得 适应 平板 电脑 、 智能 手机 等 设备 的 不 同 大 小 。 这 样 一 来 , 网 站 布局 的 复杂 度 就 会 直线 上 升 ， 
寺 别 是 在 大 多 数 网 站 都 会 包含 菜单 、 导 航 、 边 栏 等 部 件 的 情况 下 。 如 果 你 的 目标 就 是 只 创建 一 个 网 
站 ， 让 它 能 在 不 同 的 浏览 器 环境 下 平滑 过 渡 ， 那 网 页 中 的 这 些 部 件 就 构成 了 非常 大 的 挑战 。 

因为 网 页 设计 师 一 直 都 依靠 CSS 来 实现 页 面 布局 和 格式 化 ， 所 以 最 好 让 CSS 针 对 上 述 问 题 拿 
出 一 个 解决 方案 。CSS3 确 实 为 此 提供 了 一 个 完美 的 工具 : 媒体 查询 ( media query )。 通 过 媒体 查 
询 ， 可 以 让 网 站 根据 窗口 大 小 或 设备 的 不 同 ， 无 缝 地 在 不 同 的 样式 集 之 间 切 换 。 

媒体 查询 是 移动 Web 开 发 的 基本 技术 。 就 算 你 不 准备 让 访客 通过 手机 浏览 你 的 网 站 ,媒体 查 
询 也 还 是 有 用 的 , 它 可 以 确保 网 站 能 够 自 适应 浏览 器 窗口 大 小 的 变化 。 比 如 , 窗口 缩小 时 隐藏 布 
局 中 的 一 栏 , 或 者 把 导航 链接 从 页 面 项 部 转移 到 页 面 一 侧 。 这 种 自 适应 可 以 归结 为 现在 广 为 流 行 
的 一 个 设计 理念 : 响应 式 设计 ， 而 这 正 是 本 章 所 要 探讨 的 话题 。 


7.1 响应 式 设 计 基 础 


窗口 大 小 不 定 是 Web 诞 生 之 初 就 存在 的 问题 。 经 过 多 年 的 实战 ， 网 页 设计 师 已 经 为 此 发 明了 
很 多 技术 ， 有 的 精妙 ， 有 的 粗 器 ， 但 目标 都 是 为 了 实现 响应 式 设计 。 

在 学 习 使 用 媒体 查询 之 前 , 有 必要 先 了 解 实 现 响 应 式 设计 的 传统 技术 。 这 些 技术 即使 到 了 今 
天 也 很 重要 ， 只 不 过 正如 我 们 将 要 说 明 的 ， 面 对 今天 的 挑战 , 光 有 这 些 技术 已 经 不 够 了 。 只 有 认 
识 到 它们 的 局 限 性 ， 才 能 真正 理解 CSS3 怎 么 填补 这 项 空白 。 


7.1.1 流 式 布局 
应 对 窗口 大 小 缩放 的 最 简单 方案 , 就 是 做 一 个 等 比 缩放 布局 。 这 种 布局 会 尽 其 所 能 地 占用 所 
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有 可 用 空间 ， 不 管 空间 多 大 或 多 小 。 
创建 等 比 缩放 布局 在 理论 上 相当 简单 , 就 是 将 网 页 分 成 几 栏 , 然后 用 比例 而 非 像素 设 定 它们 
的 宽度 。 假 设 我 们 有 下 面 这 样 的 两 栏 布局 : 


<body> 
<div class="leftColumn"> 





cdivy 
<div class="rightColumn"> 
cjdivy 
</body> 
如 果 是 固定 布局 ， 那 么 CSS 规 则 是 这 样 的 : 


.leftColumn { 
width: 275px; 
float: left; 

} 




















.rightColumn { 
width: 685px; 
float: left; 

} 


body { 
margin: Opx; 





如 果 是 等 比 缩放 布局 ， 那 么 CSS 规 则 就 要 这 样 写 : 


.leftColumn { 
width: 28.6%; 
float: left; 

} 


.rightColumn { 
width: 71.4%; 
float: left; 

} 


body { 
margin: Opx; 




















这 里 把 左 栏 的 宽度 设 定 为 28.6%， 也 就 是 占用 容 右 宽度 的 28.6%， 容 器 就 是 cbody> 元 素 。 我 们 
这 个 例子 里 的 <body> 元 素 没有 外 边 距 ， 因 此 与 浏览 器 窗口 是 等 宽 的 ,那么 左 栏 最 终 的 宽度 相当 于 
浏览 器 窗口 的 28.6%。 

结果 ， 左 右 两 栏 的 宽度 加 起 来 正好 是 100%， 不 管 浏 览 器 窗口 多 大 或 多 小 ， 这 两 栏 都 会 随 着 
扩张 或 收缩 。 等 比 缩放 布局 又 称 为 流 式 布局 ， 因 为 布局 中 的 内 容 始终 会 像 水 一 样 , 平滑 地 充满 所 
有 空间 。 
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注意 ”在 这 个 例子 中 ， 左 栏 28.6% 的 宽度 是 用 它 在 固定 布局 中 的 宽度 (275 像 素 ) 除 以 固定 布局 
总 宽度 ( 960 像素 ) 计算 得 来 的 。 实 际 开发 中 ， 大 家 都 习惯 开始 的 时 候 先 使 用 固定 布局 ， 
然后 在 此 基础 上 创建 流 式 布局 。 


当然 ， 光 调整 栏 的 大 小 还 不 行 。 还 得 考虑 外 边 距 、 内 边 距 和 边框 。 新手 网 页 设计 师 在 第 一 次 
创建 流 式 布局 时 ,经 常会 设 定 固定 的 外 边 距 和 内 边 距 ( 使 用 像素 值 )， 只 等 比 缩放 栏 宽 。 想 想 看 ， 
栏 所 占 的 宽度 必须 减 掉 外 边 距 宽度 。 可 栏 宽 百 分 比 是 基于 整个 页 面 宽 度 计算 的 , 并 没有 考虑 被 外 
边 距 占 掉 的 空间 。 这 种 冲突 在 罕 窗 口中 可 能 会 导致 问题 , 造成 固定 宽度 的 外 边 距 把 等 比 缩放 的 栏 
挤 出 第 一 排 的 现象 。 

举 个 例子 吧 ， 假设 有 以 下 样式 表 : 

.leftColumn { 

width: 27%; 
margin: 5px; 
float: left; 

} 


.rightColumn { 
width: 68%; 
margin: 5px; 
float: left; 
} 
这 里 两 栏 合 计 占 95%， 给 外 边 距 留 出 5% 的 空间 。 在 中 大 尺寸 窗口 中 ，5% 是 以 放 得 下 外 边 中 
了 ， 但 如 果 窗 口 窗 到 一 定 程度 ， 就 会 导致 5% 的 空间 容纳 不 下 固定 的 外 边 距 。 要 想 看 看 出 问题 时 
的 效果 , 可 以 用 background 属 性 给 每 一 栏 设 定 不 同 的 背景 颜色 , 然后 逐渐 调 窗 窗 口 , 如 图 7-1 所 示 。 














Two Columns x\ - "EN 图 7-1: 等 比 缩放 的 栏 与 固定 宽度 外 边 距 不 适 
3 CC Q Twocolumnshtml 上 配 。 在 窗 口 过 小 的 情况 下 了 外 边 距 会 把 第 二 
ya 
This is the column on Thisis the column on the right. It has proportional sizing 栏 挤 到 下 面 
the left. It has and fixed margins. 
Proportional sizing 
and fixed margins. 














a - ° ED 


| Two Columns x 


一 -一 
3 CC Q Twocolumns.html 三 

This is the 

column on 

the left. It has 

proportional 

sizing and 

fixed 

margins. 

This is the column on the right. It 

has proportional sizing and fixed 
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要 解决 这 个 问题 ， 必 须 同样 以 比例 设 定 外 边 距 的 宽度 。 如 果 除 了 栏 页 面 还 剩 下 5% 的 宽度 ， 
那么 就 可 以 把 这 个 宽度 分 配给 外 边 距 。 平 均 分 三 份 ， 每 份 是 1.66% ， 分 别 位 于 窗口 左边 、 窗 口 右 
边 和 两 栏 之 间 ， 这 样 : 


.leftColumn { 
width: 27%; 
margin-left: 1.66%; 
margin-right: 1.66%; 
background: #FFFFCC; 
float: left; 

} 























.rightColumn { 
width: 68%; 
margin-right: 1.66%; 
background: #CCFFCC; 
float: left; 

} 


图 7-2 展 示 了 这 样 修改 后 的 结果 ， 此 时 外 边 距 和 栏 宽 都 会 按照 比例 缩放 。 























= 瑟 本 和 图 7-2: 在 水 平方 向 上 通过 百分比 
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pa , 设 定 所 有 宽度 之 后 , 页 面 布局 就 可 
] file:///D:/Desktop/backup/HTML5/Code/html5/Chapter%205? 三 、 \ 工 
st ds halls hts het 以 整体 缩放 , 适应 任意 窗口 大 小 了 
Thisisthe column on Thisis the column on the right. It has proportional sizing 
the left. It has and proportional margins. 
proportional sizing 
and proportional 
margins. 
站 -5 
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有 时 候 ， 外 边 距 基于 浏览 器 窗口 等 比 缩放 可 能 不 是 我 们 想 要 的 效果 。 为 此 ,可 以 想 一 个 别 的 
办 法 。 比 如 , 在 等 比 缩放 的 其 中 一 栏 里 再 额外 增加 一 个 元 素 , 给 这 个 元 素 设 定 固定 宽度 的 外 边 距 
和 内 边 距 。 由 于 这 个 元 素 位 于 等 比 缩放 的 顶级 部 局 元 素 〈 栏 ) 的 内 部 ， 因 此 它 的 宽度 会 自动 适应 
窗口 大 小 变化 。 

边框 也 有 类 似 的 问题 。 如 果 你 给 栏 加 了 边框 ， 那 么 因为 它 也 要 占用 空间 ， 所 以 也 会 像 图 7-1 
中 的 固定 外 边 距 一 样 破坏 布局 。 但 边框 宽度 不 接受 百分比 值 , 等 比 缩放 边框 的 方法 不 适用 。 此 时 
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最 简单 的 办 法 ， 同 样 是 在 等 比 缩放 的 栏 里 额外 增加 一 个 <div> 元 素 ， 把 边框 设 定 到 这 个 <div> 元 素 
上 。 这 个 技巧 已 经 被 使 用 很 多 年 了 ， 虽 然 会 增加 一 点 标记 的 复杂 性 ( 多 了 一 层 布局 元 素 )， 但 它 
可 以 保证 布局 在 任意 尺寸 的 窗口 下 都 不 走样 。 








CSS3 的 box-sizing 与 calc() 
刚才 我 们 谈 到 的 布局 问题 是 一 个 常见 的 问题 ， 常 见 到 CSS3 为 此 给 出 了 很 多 的 解决 方案 。 

在 此 我 们 只 介绍 两 个 最 有 前 途 ( 但 也 不 能 算 完美 ) 的 方案 。 
口 box-sizing。 通 常 ， 边 框 会 被 加 在 元 素 的 外 围 ， 因 此 在 计算 布局 时 就 要 减 掉 边框 占用 的 
空间 。CSS3 增 加 了 一 个 box-sizing 属 性 ,如果 这 个 属性 的 值 是 border-box,， 那么 边框 就 
会 位 于 金子 的 内 侧 。 边 框 看 起 来 没什么 区 别 ， 但 盒子 大 小 的 计算 方式 不 一 样 了 。 比 如 ， 

这 意味 着 67% 宽 的 栏 ， 无 论 其 边框 多 粗 ， 始 终 都 是 67% 宽 。 

口 calc() 函 数 。 如 果 你 需要 混合 使 用 比例 和 固定 单位 ， 可 以 让 CSS3 帮 你 计算 一 个 结果 ， 
然后 在 布局 中 ,这 就 要 用 到 calc() 函 数 。 举 个 例子 ,假如 你 想 把 一 栏 的 宽度 设 定 为 67% 
减 5 像 素 ( 的 外 边 距 )。 不 太 细 心 的 开发 者 可 能 会 直接 把 栏 宽 设 定 为 65% (这 样 会 导致 
图 7-1 所 示 的 空间 不 适 配 的 问题 )。 但 有 了 CSS3， 就 可 以 把 width 属 性 设 定 为 
calc(67%-5px)，, 以 确保 这 一 栏 始终 能 占据 除外 边 距 之 外 的 所 有 空间 ,一 个 像素 也 不 多 。 
可 惜 的 是 ,使 用 这 两 个 新 特性 的 麻烦 也 不 少 。IE7 不 支持 box-sizing 属 性 ， 在 Firefox 中 使 
用 它 需要 添加 开发 商 前 组 -moz-( 参见 6.1.4 节 )。IE7、IE8 都 不 支持 calc() 函 数 , 在 较 早 的 Android 
Chrome 和 Safari 浏 览 器 中 使 用 它 也 需要 添加 -webkit- 前 组。 当然 也有 一 些 腻子 脚本 可 以 帮 有 我 们 
“ 抹 平 ”这 些 问 题 ， 但 目前 来 看 ， 在 用 户 升级 到 较 新 的 浏览 器 之 前 ， 最 好 还 是 先 不 使 用 它们 。 


7.1.2 流 式 图 片 


要 实现 响应 式 设计 , 构建 多 栏 等 比 缩放 的 布局 是 第 一 步 。 第 二 步 就 是 处 理 栏 中 的 内 容 ,， 这 一 
步 涉及 的 问题 更 多 。 

其 中 一 个 问题 就 是 图 片 。 一 般 来 说 , 图 片 占 用 的 空间 取决 于 其 内 容 , 也 就 是 图 片 到 底 由 多 少 
个 像素 组 成 。 但 这 种 不 加 控制 的 处 理 方式 在 小 尺寸 窗口 中 会 导致 问题 。 如 果 窗 口 太 小 , 图 片 就 会 
撑 开 所 在 的 栏 ， 挤 掉 其 他 元 素 ， 让 人 觉得 布局 过 于 草率 。 

解决 这 个 问题 的 方法 很 简单 ， 就 是 把 图 片 的 宽度 限定 为 其 容 需 的 最 大 寓 度 : 

ing { 

max-width: 100%; 

} 

一 如 既往 ， 这 里 的 100% 相 对 的 是 元 素 所 在 的 容 需 。 在 此 ， 容 需 就 是 栏 ， 而 不 是 整个 页 面 。 
结果 ， 图 片 要 么 显示 为 自己 的 实际 大 小 ， 要 么 扩张 到 容 顺 的 边界 为 止 ， 如 图 7-3 所 示 。 
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TREE = “本 到 图 7-3; 没有 设 定 流 式 图 片 与 设 定 流 式 图 片 的 前 


























GC Q Fluidimage.html 三 后 对 比 ， 前 者 图 片 窜 出 了 窗 口 了 后 者 图 片 以 适 
| 当 尺 寸 显 示 
This is the column on The picture below always takes its full size. 
the left. It has 
Proportional sizing 
and proportional 
margins. 
y DD Two Columns x 忆 








ck FluidImage.html 三 


This is the column on The Picture below has a maximum width of 98%, and a 1% 
the left. It has margin on each side. 

Proportional sizing 

and proportional = 

margins. 
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提示 如 果 你 想 给 图 片 周转 加 上 一 点 外 边 距 ， 必 须 给 margin-left 和 margin-right 设 定 百分比 值 ， 
而 且 要 保证 max-width 等 于 100% (不 能 超 )。 


流 式 图 片 这 个 方法 也 有 不 足 , 那 就 是 无 论 显 示 的 时 候 多 小 ,浏览 器 都 必须 下 载 完 整 的 大 图 片 。 
这 样 就 会 浪费 一 些 时 间 和 带宽 ， 移 动 设备 对 此 比较 敏感 。 可 惜 CSS 本 身 没 有 办 法 解决 这 个 问题 
别 急 ， 有 人 想 出 了 解决 方案 , 但 需要 用 到 服务 器 端 代码 、Web 服 务 和 JavaScript 库 。 如 果 你 的 网 站 
要 问 移 动用 户 显 示 大 量 图 片 ， 可 以 考虑 这 种 方案 ,参见 Smashine Magazine 的 这 篇 文章 : 
http://tinyurl.com/responsive-img ( 不 过 ， 大 多 数 Web 开 发 者 不 用 考虑 这 些 )。 好 在 ， 对 于 类 似 但 更 
严重 的 视频 缩放 问题 ， 我 们 还 是 有 原生 方案 的 ， 参见 本 章 最 后 的 附注 栏 。 


7.1.3” 流 式 排版 


知道 了 怎么 实现 流 式 布 局 和 流 式 图 片 ， 接 下 来 该 关心 栏 中 的 文字 内 容 了 。 粗心 的 Web 开 发 者 
会 给 文字 选择 差不多 大 的 字号 ( 使 用 像素 单位 )， 然 后 就 那样 了 。 可 是 ， 这 种 “ 硬 编码 ”的 字号 
会 破坏 响应 式 布 局 ,因为 在 大 显示 器 上 看 着 舒服 的 文字 , 到 了 移动 设备 的 小 屏幕 上 就 会 变 得 难以 
辨认 。 为 看 清文 字 ， 访 客 必 须 手 工 放大 网 页 。 响 应 式 布局 应 该 做 到 不 需要 访客 缩放 或 滚动 页 面 ， 
就 能 适应 各 种 屏幕 大 小 。 
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同样 ， 解 决 方案 还 是 不 要 使 用 像素 或 点 这 样 的 固定 度量 单位 ， 而 要 使 用 百分比 或 em 等 相对 
单位 。 所 谓 em， 就 是 M 的 读音 ， 是 最 常用 的 相对 单位 。 

















注意 在 传统 铅字 排版 时 代 ，em 是 表示 字母 宽度 的 单位 。 屠 时候 说 的 em dash ( 全 身 线 )， 指 就 
是 与 今天 字体 中 大 写 M 等 宽 的 线 。! 








百分比 和 em 的 结果 相同 ， 都 是 让 文字 相对 于 浏览 器 默认 的 文字 大 小 缩放 。 把 文字 大 小 设置 
为 110% 或 1.1 em， 结 果 就 是 比 常规 没有 应 用 样式 的 文字 大 10%， 而 50% 或 0.5 em 就 是 常规 文字 大 








小 的 一 半 。 
虽然 使 用 百分比 和 em 都 不 是 问题 ， 但 大 多 数 响应 式 布局 的 开发 者 都 沿 习 同 样 的 做 法 。 他 们 




















把 页 面 的 基准 文字 设置 为 100% ( 只 是 为 强调 这 是 其 他 文字 缩放 的 基准 )， 然 后 在 其 他 元 素 中 再 用 
em 单位 放大 或 缩小 文字 : 


body { 
font-size: 100% 


} 
pl 


font-size: 0.9em 


} 


hi { 
font-size: 2em 


} 

富有 经 验 的 Web 开 发 者 不 会 就 此 黑手 。 他 们 会 把 布局 中 所 有 固定 大 小 的 度量 单位 一 律 改 成 em 
单位 。 比 如 说 ， 布 局 的 某 个 角落 有 一 个 边框 或 者 一 点 外 边 距 或 内 边 距 ， 最 好 也 用 em 而 不 是 像素 。 
使 用 em 之 后 ， 这 些 细节 所 占用 的 空间 都 会 根据 文字 大 小 而 缩放 。 变 化 虽然 不 大 ， 但 却 能 给 人 更 
专业 的 印象 。 

下 面 举 个 具体 的 例子 。 假 设 左 边 的 一 栏 是 两 个 cdiv> 骨 套 的 布局 ， 内 部 的 <div> 用 于 为 左 栏 内 
容 周 围 添加 空白 ， 这 样 不 会 影响 整体 两 栏 布局 的 等 比 缩放 : 


<body> 
<div class="leftColumn"> 
<div class="leftColumnContent"> 

















</div> 
</div> 
<div class="rightColumn"> 
</div> 
</body> 











注 1: 参见 译 者 的 文章 “你 未 必 知 道 的 CSS 故 事 : 揭 开 leading 的 面纱 ": http:Wituring.cn/article/18076。( 译 者 注 ) 
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用 像素 来 设 定 左 栏 中 的 内 容 <div> 当 然 也 行 ， 布 局 也 是 流 式 的 。 但 使 用 em 的 效果 会 更 棒 ， 就 
像 下 面 这 样 : 
.leftColumn { 
width: 28.6%; 
background: #FFFFCC; 


float: left; 
} 


.rightColumn { 
width: 71.4%; 
background: #CCFFCC; 
float: left; 

} 


.leftColumnContent { 
border: 0.07em solid gray; 
margin: 0.3em; 
padding: 0.2em 0.3em 0.4em 0.4em; 


注意 对 大 多 数 布局 而 言 ， 使 用 em 单位 设 定 边框 、 内 边 距 和 外 边 距 ， 最 大 的 好 处 是 可 以 防止 元 
素 在 小 窗口 里 显示 得 过 大 ,或 者 说 在 移动 设备 的 小 屏幕 上 显得 太 过 突 元 。 


CSS3: 扩展 em 的 rem 

在 处 理 复杂 的 响应 式 布局 时 ，Web 设 计 师 通常 会 面临 一 个 难题 。 等 比 缩放 的 文字 单位 ， 比 
如 em 和 百分比 ,会 使 文字 相对 于 包含 它们 的 元 素 缩放 。 这 在 前 面 那 个 简单 的 例子 中 不 是 问题 ， 
因为 包含 元 素 是 容纳 整个 页 面 的 <body> , 或 者 另 一 个 继承 了 <body> 元 素 字体 设置 的 元 素 。 可 是 ， 
在 对 多 级 点 套 的 布局 应 用 等 比 缩放 时 ， 麻 烦 就 来 了 。 

比如 ， 你 把 第 一 层 <div> 的 文字 大 小 设 定 为 1.1 em， 把 这 层 <div> 中 的 <h1> 设 定 为 2 em。 你 心 
里 想 的 是 这 个 标题 的 文字 大 小 是 默认 文字 大 小 的 两 倍 ， 而 实际 上 呢 ， 这 个 标题 文字 的 大 小 却 是 
容器 文字 大 小 1.1 em 的 两 倍 。 简 单一 乘 ， 可 知 这 个 标题 文字 大 小 最 终 是 默认 文字 大 小 的 2.2 倍 。 

要 避免 这 种 复合 的 效果 ,就 得 始终 记 着 自己 在 什么 地 方 设 定 过 文字 大 小 。 理想 情况 下 ， 当 
然 是 只 在 一 层 布 局 元 素 上 设 定 。 不 过 ，CSS3 引 入 了 一 个 新 的 单位 ， 非 常 巧妙 地 解决 了 这 个 问 
题 ， 这 个 单位 就 是 rem (root em )。 本 质 上 ，em 和 rem 都 是 相对 度量 单位 ， 但 区 别 在 于 用 rem 设 
定 的 文字 大 小 始终 相对 于 <html> 元 素 ( 而 不 是 包含 元 素 ) 的 文字 大 小 计算 。 因 此 ，2 rem 永 远 
等 于 布局 默认 文字 大 小 的 两 倍 ， 在 哪 一 级 布局 上 都 是 。 

目前 浏览 器 对 rem 的 支持 非常 好 , 当然 , IE7 和 IE8 又 不 在 此 列 。 虽然 技术 上 可 以 使 用 JavaScript 
肛 子 脚本 填补 这 个 空白 (参见 http://tinyurl.com/rem-polyfill )， 但 大 多 数 Web 开 发 者 都 很 明智 ， 不 
愿意 仅仅 为 了 一 个 度量 单位 而 让 页 面 又 多 加 载 一 个 脚本 ， 因 此 至 今 仍然 坚持 只 使 用 em。 
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当然 , 排版 工作 不 仅仅 是 设 定 文字 大 小 。 要 保证 在 各 种 屏幕 上 的 可 读 性 , 还 要 考虑 行 长 、 行 高 、 
外 边 距 ， 甚 至 要 使 用 多 栏 分 隔 文本 〈 像 6.4.6 节 介绍 的 那样 )。 普通 的 流 式 布 局 和 比例 缩放 很 难 解决 
上 述 这 些 问题 。 因此, 我 们 得 换 一 种 思路 : 创建 更 灵活 的 样式 表 , 使 用 媒体 查询 有 针对 性 地 微调 这 
些 细节 ， 稍 后 我 们 会 讲 到 。 但 首先 ， 你 得 理解 男 外 一 个 影响 因素 ， 那 就 是 手机 的 自动 缩放 行为 。 


























7.1.4 理解 视 口 


理论 上 , 我 们 前 面 介绍 的 两 栏 布局 可 以 适应 任意 窗口 大 小 。 但 实际 上 ， 对 于 小 屏幕 移动 设备 
而 言 ， 情 况 还 要 复杂 那么 一 点 点 ， 那 就 是 还 要 考虑 视 口 (viewport ) 大 小 。 

苹果 公司 在 推出 Phone 的 时 候 ， 为 了 让 iPhone 的 小 屏幕 尽 可 能 完整 显示 当时 的 网 站 ， 发 明了 
“ 视 口 ”这 个 概念 。 当 时 的 网 站 设计 师 还 不 知道 什么 是 响应 式 设计 呢 。 有 了 视 口 的 概念 之 后 ,iPhone 
上 的 Safari 浏 览 絮 就 可 以 显示 更 多 的 网 页 内 容 ， 而 不 仅仅 是 显示 网 页 的 一 个 角落 。 这 个 能 缩小 显 
示 网 页 的 区 域 ， 就 叫 视 口 。 

视 口 这 种 技术 是 权衡 折 训 的 产物 。 它 可 以 保证 网 页 在 手机 上 看 起 米 更 像 在 桌面 浏览 絮 中 的 样 
子 。 可 这 样 一 来 ， 网 页 中 的 文字 就 小 得 难以 辨认 了 。 用 户 滚动 页 面 的 操作 减少 了 , 但 放大 缩小 的 
操作 增加 了 。 用 户 能 更 容易 找到 网 页 中 自己 关注 的 部 分 ， 但 要 阅读 其 中 的 内 容 就 会 比较 麻烦 。 





























注意 苹果 引入 视 口 的 概念 后 ， 所 有 移动 开发 者 也 都 认同 了 这 个 做 法 。 唯 一 的 区 别 就 是 设 定 多 
大 的 视 口 ， 以 及 显示 页 面 的 多 大 部 分 。 


如 果 你 开发 的 网 站 只 针对 桌面 浏览 器 , 那 不 用 管 设 备 的 视 口 。 视 口 的 默认 设置 会 确保 网 站 在 
超 小 的 屏幕 上 也 能 显示 得 有 模 有 样 〈 尽 管用 户 可 能 并 不 会 觉得 缩小 后 的 网 站 非常 方便 )。 可 是 ， 
如 果 你 想 做 的 就 是 响应 式 设 计 ， 就 是 要 设计 一 个 真正 的 、 移 动 设备 友好 的 网 站 , 那 就 得 修改 视 口 
的 设置 。 你 得 告诉 浏览 器 不 要 自动 执行 视 口 缩放 ,很 简单 ， 只 要 像 下 面 这 样 在 页 面 的 <head> 部 分 
加 一 个 <meta> 元 素 即 可 : 

<meta content="initial-scale=1.0" name="viewport"> 

这 行 代 码 告诉 移动 浏览 器 使 用 真实 的 页 面 比 例 ， 不 要 缩放 。 比 如 ， 对 iPhone 来 说 ， 这 就 意味 
着 网 页 要 显示 在 一 个 320 像 素 宽 的 屏幕 上 ， 而 且 不 缩放 。 如 果 不 修改 视 口 设置 ，iPhone 会 按照 980 
像素 的 桌面 级 宽度 来 显示 你 的 页 面 ， 然 后 再 缩小 显示 在 视 口 中 。 图 7-4 展 示 了 上 述 区 别 。 
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图 7-4: 左 : iPhone 默认 会 自动 缩小 页 面 ， 
让 这 个 流 式 布局 像 是 显示 在 桌面 浏览 
器 中 一 样 。 结 果 ， 此 时 的 文字 非 放 大 无 
法 看 清 。 右 : 禁用 缩放 之 后 ， 可 以 看 到 
页 面 在 小 屏幕 中 的 真实 效果 。 下 一 步 就 
ee 是 使 用 媒体 查询 简化 布局 在 小 屏幕 中 
a 显示 时 的 效果 


side. 












































Proportiond 
margins. 
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读者 可 能 已 经 知道 了 ， 有 不 少 在 线 模拟 器 可 以 让 你 看 到 自己 的 网 站 在 不 同 移动 设备 中 的 
样子 。 比 如 ，http://mobiletest.me 可 以 让 你 在 最 新 的 Phone、iPad 和 Android 设 备 上 比较 网 
站 的 外 观 。 不 过 ， 多 数 模拟 器 都 不 支持 自动 缩放 。 换 和 句 话 说 ， 在 这 些 模 拟 器 中 预览 网 站 
时 ,网 站 看 起 来 会 像 你 在 cmeta> 标 签 里 跟 上 面 似 的 把 初始 比例 设置 为 1 的 效果 一 样 。 如 果 
你 并 没有 像 上 面 那样 设置 ， 那 模拟 器 中 的 结果 就 不 可 信 了 ， 你 得 多 加 注意 。 


注 


7.2 ”使 用 媒体 查询 适 配 布 局 


前 面 介绍 了 怎么 创建 流 式 的 、 可 以 缩放 适应 任何 浏览 器 窗口 的 布局 。 这 种 布局 能 保证 页 面 在 
任何 窗口 中 正常 显示 ， 但 却 不 能 保证 它们 总 是 赏心悦目 。 

简单 的 流 式 布局 在 某 些 极端 情况 下 可 能 很 难看 。 比 如 , 在 非常 小 的 窗口 中 ,多 栏 布局 中 每 一 
栏 的 宽度 将 极其 有 限 ， 此 时 的 文字 和 图 片 会 挤 作 一 团 ， 完 全 没有 可 读 性 。 而 在 非常 大 的 窗口 中 ， 
每 一 栏 又 会 变 得 极 宽 , 由 于 每 一 行文 字 都 很 长 很 长 , 读者 看 完 一 行 , 再 找 下 一 行 就 会 变 得 很 困难 。 

对 于 上 述 问题 ， 可 以 限定 布局 的 最 大 宽度 和 最 罕 宽 度 。 一 般 是 使 用 max-width 和 min-width 这 
两 个 属性 。 如 果 窗 口 宽度 超出 了 最 大 宽度 ， 则 超出 部 分 会 以 外 边 距 填充 。 反 之 ， 如 果 窗 口 宽度 缩 
小 到 小 于 最 小 宽度 ， 则 相应 的 栏 会 保持 最 小 宽度 不 再 缩小 。 这 样 ， 从 某 种 程度 上 可 以 实现 对 布局 
视觉 效果 的 保护 。 但 从 另 一 方面 看 ,限定 宽度 无 疑 会 前 弱 响应 式 设计 的 价值 。 如 果 把 最 小 宽度 设 
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定 得 比 iPhone 窗口 宽 ， 那 么 iPhone 用 户 看 起 来 就 会 不 爽 。 
显然 , 更 好 的 办 法 是 随 着 窗口 大 小 变化 渐进 地 调整 布局 结构 。 比 如 , 在 小 窗口 里 就 使 用 不 带 
侧 栏 或 广告 栏 的 单一 流 线 布 局 ， 而 在 大 窗口 中 则 可 以 增 大 字号 并 使 用 多 栏 布局 (参见 6.4.6 节 )。 
媒体 查询 ( media query ) 正 是 为 此 而 生 的 。CSS3 的 这 个 功能 可 以 让 我 们 根据 不 同 的 浏览 需 
求 , 分别 设计 不 同 的 样式 。 使 用 适当 的 情况 下 ， 通 过 它 可 以 实现 不 改动 一 行 HTML 就 让 布局 既 能 
适应 超 宽 的 屏幕 ， 又 可 以 满足 Phone 等 手持 设备 的 需要 。 


7.2.1 媒体 查询 


媒体 查询 必须 知道 查看 网 页 的 设备 的 某 些 重要 信息 〈 比如 屏幕 大 小 、 分 辨 率 、 颜 色 位 深 ,等 
等 )。 根 据 这 些 信息 ， 可 以 分 别 应 用 不 同 的 样式 甚至 替换 整个 样式 表 。 

最 简单 的 媒体 查询 在 样式 表 里 就 是 一 个 独立 的 代码 块 。 这 个 代码 块 以 @media 开 头 , 随后 是 一 对 
圆 括号 , 然后 是 一 对 花 括号 , 其 中 包含 符合 条 件 的 情况 下 要 应 用 的 样式 。 媒体 查询 的 基本 结构 如 下 : 


@media (media-feature-name: value) { 
/* 符 合 条 件 时 应 用 的 样式 */ 
} 
显然 ， 媒 体 查 询 很 像 JavaScript 中 的 条 件 块 。 如 果 浏 览 器 当前 的 条 件 与 圆 括 号 中 的 条 件 匹 配 ， 
它 就 会 采用 花 括号 中 的 那些 样式 。 如 果 不 匹 配 ， 浏 览 器 会 忽略 这 些 样 式 。 



































注意 浏览 器 始终 会 采用 位 于 @media 代 码 块 之 外 的 样式 。 满 足 条 件 时 的 媒体 查询 样式 是 在 其 他 
样式 基础 之 上 应 用 的 。 为 此 ， 条 件 式 媒体 查询 样式 经 常 要 履 盖 其 他 样式 ， 比 如 隐藏 之 前 
可 见 的 元 素 ， 把 某 个 区 块 移动 到 另 一 个 位 置 ， 调 整 字 号 大 小 ， 等 等 。 


使 用 媒体 查询 之 前 ， 必 须知 道 可 以 “查询 ”媒体 ( 设备 硬件 ) 的 哪些 条 件 。 媒 体 查 询 标准 规 
定 了 可 以 查询 的 各 种 信息 ， 这 些 信息 被 称 为 媒体 特性 ( media feature )。 比 如 ， 可 以 在 显示 区 域 的 
宽度 缩小 到 一 定 值 的 时 候 改 变样 式 。 表 7-1 列 出 了 最 常用 的 媒体 特性 。( 这 个 表 里 没 有 包含 那些 尚 
未 得 到 广泛 支持 的 特定 于 浏览 需 的 试验 性 媒体 特性 。) 


表 7-1 媒体 查询 中 最 常用 的 媒体 特性 



































特性 名 值 应 用 场景 

width 显示 区 域 (对 打印 机 而 言 是 打印 表面 ) ”改变 布局 以 适应 非常 窄 (如 手机 ) 或 
bert 的 宽度 非常 宽 的 显示 器 

max-width 

height 显示 区 域 的 高 度 改变 布局 以 适应 非常 长 或 非常 短 的 显 
min-height 示 需 

max-height 

device-width 当前 计算 机 或 设备 屏幕 的 宽度 (或 打 ”根据 不 同 设备 (如 手机 ) 调整 布局 
min-device-width 印 输出 时 纸 面 的 宽度 ) 





max-device-width 
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特性 名 值 应 用 场景 
device-height 屏幕 或 纸 面 的 高 度 根据 不 同 设备 (如 手机 ) 调整 布局 








min-device-height 
max-device-height 
























































orientation landscape (横向 ) 或 portrait (纵向 ) ”根据 设备 的 朝向 调整 布局 
device-aspect-ratio 显示 区 域 的 宽 高 比 (1/1 是 正方 形 ) 根据 窗口 形状 调整 样式 (问题 可 能 比较 
min-device-aspect-ratio 复杂 ) 
max-device-aspect-ratio 
color 屏幕 颜色 的 位 深 (1 位 表示 黑白 , 目前 ”检查 是 否 支 持 彩 色 输 出 (比如 , 是 不 是 
min-color 主流 显示 器 都 是 24 位 ， 每 个 像素 可 以 ”要 黑白 打印 ) ， 或 者 支持 的 颜色 数量 
max-color 显示 数 百 万 种 颜色 ) 

CSS 媒 体 类 型 


CSS 的 制定 者 们 在 CSS2.1 中 尝试 解决 过 多 设备 的 问题 。 当 时 引入 了 所 谓 的 “媒体 类 型 ”， 
估计 读者 中 有 人 用 过 它 单 独 为 打印 提供 样式 表 : 


<head> 


<!-- Use this stylesheet to display the 
page onscreen. --> 
<link rel="stylesheet" media="screen" 
href="styles.css"> 


<!-- Use this stylesheet to print the 
page. --> 
<link rel="stylesheet" media="print" 
href="print styles.css"> 
</head> 


这 里 的 media 属 性 的 值 还 可 以 是 handheld (手持 )， 即 低速 、 小 屏 的 移动 设备 。 因 此 ， 现 代 
的 移动 浏览 器 0 
网 设备 的 需要 。 但 不 管 怎 么 说 ， 通 过 它 提供 打印 样式 表 还 是 个 不 错 的 方式 。 


7.2.2 创建 简单 的 媒体 查询 


你 可 能 注意 到 了 ,多 数 媒体 查询 特性 都 允许 指定 最 大 或 最 小 限制 。 这 些 限制 很 重要 ， 因 为 多 
数 媒体 查询 适用 的 值 很 宽泛 。 

使 用 媒体 查询 之 前 ， 首 先 要 选择 你 想 检测 的 属性 。 比 如 ， 要 针对 窄 屏 窗口 设置 一 组 样式 ， 就 
要 选择 max-width。 之 后 ， 你 可 以 随意 设置 限制 。 看 一 个 例子 ， 下 面 这 个 媒体 查询 块 中 的 样式 会 
在 浏览 器 窗口 小 于 等 于 480 像 素 时 应 用 : 


@media (max-width: 480px) { 


人 














到 [ 
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提示 “目前 最 流行 的 媒体 特性 是 max-device-width ( 用 于 创建 手机 版 网 站 )、max-width ( 用 于 针 
对 窗口 宽度 设 定 不 同 的 样式 ) 和 orientation ( 用 于 根据 平板 电脑 或 iPad 的 横向 或 坚 向 来 
改变 布局 )。 


要 测试 某 个 媒体 查询 ， 可 以 通过 它 应 用 一 种 明显 的 变化 。 比 如 , 可 以 通过 媒体 查询 修改 一 栏 
的 背景 颜色 : 


@media (max-width: 480px) { 
.leftColumn { 
background: lime; 
} 
} 
接 下 来 检查 这 个 媒体 查询 是 否 有 效 。 绥 慢 缩小 浏览 器 窗口 ， 等 缩小 到 480 像 素 时 ， 新 的 样式 
就 会 起 作用 , 左 栏 的 背景 变 成 黄 绿色 。 与 此 同时 ， 给 左 栏 设 定 的 其 他 样式 仍然 有 效 (比如 它 的 位 
置 和 大 小 )， 媒 体 查 询 样式 不 会 覆盖 它们 。 





注意 不 理解 媒体 查询 的 浏览 器 ( 如 IE8 ) 会 忽略 这 些 新 样式 ， 窗 口 变 大 或 缩小 不 会 影响 原 有 
样式 。 





如 有 必要 ,可 以 再 加 一 条 媒体 查询 ， 在 屏幕 更 罕 时 应 用 新 样式 。 比 如 ,下面 这 条 媒体 查询 中 
的 样式 会 在 窗口 缩小 到 250 像 素 时 起 作用 : 


@media (max-width: 250px) { 


ER 

只 要 知道 一 点 : 新 规则 会 到 加 到 原 有 规则 之 上 。 换 句 话说 , 这 里 的 样式 会 倒 加 到 常规 样式 和 
450 像 素 媒 体 查 询 样 式 之 上 ， 最 终 得 到 的 是 这 些 样式 混合 后 的 效果 。 有 点 糊涂 ? 没关系 ， 稍 后 我 
们 还 会 介绍 怎么 更 细 化 地 定义 媒体 查询 。 接 下 来 我 们 还 是 先 看 一 个 实用 的 例子 吧 。 


7.2.3 ”构建 移动 设备 友好 的 布局 


有 了 媒体 查询 ,就 可 以 创建 出 能 够 适应 手机 浏览 器 和 桌面 浏览 器 的 网 站 。 而 我 们 要 做 的 ， 就 
是 定义 不 同 的 样式 。 
图 7-5 展 示 了 第 2 章 的 ApocalypseSite.html 页 面 的 一 个 修改 版 。 原 来 的 页 面 是 固定 布局 ， 栏 宽 
是 写 死 的 。 这 个 新 版 本 则 使 用 了 本 章 介 绍 过 的 所 有 新 技术 ， 包括 适应 任意 窗口 宽度 的 流 式 布局 。 
而 且 ， 还 使 用 了 em 单位 设 定 了 外 边 距 、 内 边 距 、 边 框 宽度 、 字 体 大 小 ， 以 保证 这 些 细节 能 随 设 备 
屏幕 变化 相应 调整 。 页 面 顶 部 的 图 片 也 可 以 放大 或 缩小 ,以 填充 可 用 空间 。 左 栏 中 的 广告 图 片 则 
应 用 了 流 式 图 片 技 术 ， 从 而 不 会 超出 栏 边界 。 当 然 ， 这 个 页 面 还 通过 <meta> 元 素 设 定 了 页 面 不 能 
在 移动 浏览 器 中 放大 。 
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7-$: 这 个 页 面 
Web 设 计 的 最 佳 实践 。 访 问 示 


网 站 可 以 查 


采用 了 响应 式 


询 完整 的 CSS : 


http:/prosetech.comyhtml5 





简 言 之 ， 这 个 新 的 ApocalypseSite. ed ele 但 还 称 不 上 移动 设备 友好 。 为 
它们 在 小 屏幕 中 看 起 来 都 不 好 看 。 因 此 ， 就 要 用 





什么 这 么 说 呢 ? 因为 不 管 并 排 的 两 栏 怎 么 
到 媒体 查询 了 。 





动手 写 样式 之 前 ,应 该 先 确定 移动 版 网 站 的 外 观 。 一 般 来 说 , 移动 版 网 站 都 只 有 一 栏 ， 原 来 


的 侧 栏 要 么 隐藏 ， 要 么 转移 到 主 内 容 之 上 或 之 下 。 


中 的 一 种 外 观 : 


创建 移动 版 ApocalypseSite.html 页 面 非 





常 简单 。 页 周 和 文 字 会 自动 缩小 ， 


流 式 布局 和 em 单位 。 剩 下 的 就 是 使 用 媒体 查询 重新 排列 分 栏 了 
开始 的 时 候 ， 页 面 中 的 两 栏 由 以 下 样式 规则 控制 : 


.NavSidebar { 
float: left; 
width: 22%; 
font-size: small; 


} 


.Content { 
float: left; 
width: 78%; 

} 


图 7-6 展 示 了 ApocalypseSite.html 页 面 在 iPhone 


因为 我 们 使 用 的 是 
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图 7-6: 这 里 是 ApocalypseSite.html 页 
面 移动 版 的 两 个 截图 。 页 面 顶 部 是 一 
个 小 页 丑 , 紧 接着 是 文章 内 容 ( 左 图 )。 
原来 左 侧 中 的 文章 链接 和 广告 转移 到 
了 文章 内 容 的 下 方 ( 右 图 ) 



























































左 栏 被 设 定 为 22% 宽 ， 向 左 浮动 。 内 容 栏 被 设 定 为 78% 宽 ， 浮 动 到 左 栏 右 侧 。 
因为 这 个 布局 在 浏览 器 窗口 变 罕 后 就 不 好 看 了 ， 所 以 应 该 使 用 流行 的 max-width 媒 体 特 性 。 











如 前 所 述 ，max-width 会 取得 当前 浏览 絮 窗 口 的 宽度 。 如 果 这 个 值 比较 小 ， 那 么 并 排 的 两 栏 就 很 


难看 。 














以 下 就 是 去 掉 浮 动 、 重 设 栏 宽 ( 每 栏 占 满 可 用 宽度 ) 的 媒体 查询 : 


@media (max-width: 568px) { 
.NavSidebar { 
float: none; 
width: auto; 


} 


.Content { 
float: none; 
width: auto; 

} 

} 


这 些 样式 会 全 加 在 已 有 样式 之 上 。 因 此 ， 有 必要 的 话 就 得 把 修改 过 的 样式 重 置 回 其 默认 值 。 














有 具体 来 说 ， 这 里 的 媒体 查询 把 float 属 性 重 置 为 none， 把 




















width 





属性 重 置 为 auto ( 重 置 为 100% 也 可 





以 )。 这 些 都 是 默认 值 ， 最 初 的 分 栏 样式 修改 了 这 些 值 。 当 然 ， 最 初 的 NavSidebar 样 式 也 设 定 了 
文字 大 小 ， 但 这 里 的 媒体 查询 并 没有 重 置 该 样式 ， 因 此 该 样式 依旧 起 作用 。 
从 技术 角度 讲 , 这 里 的 媒体 查询 定义 的 是 罕 窗 口中 页 面 的 样式 ,无论 用 户 使 用 移动 浏览 器 还 






































是 桌面 浏览 咒 的 罕 窗 口 ， 看 到 的 效果 是 一 样 的 。 这 样 很 好 , 但 在 此 基础 上 ,我 们 还 可 以 为 桌面 浏 


览 器 的 窄 窗口 和 移动 浏览 器 分 别 设 定 不 同 的 样式 。 要 针对 桌面 浏览 器 的 罕 窗 口 ， 应 该 使 用 
max-width， 而 要 针对 移动 浏览 器 ， 就 要 使 用 max-device-width， 如 表 7-1 所 示 。 
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提示 窗口 多 大 时 切换 到 简化 布局 并 没有 一 定之 规 ， 但 568 像 素 是 个 不 错 的 选择 ， 因 为 568 像 素 
是 iPhone 横向 时 的 页 面 宽 度 ( 对 Android 设 备 也 一 样 ， 稍 后 我 们 会 解释 )。 


这 个 例子 还 需要 再 调整 一 次 。 在 页 面 初始 版 的 HTML 中 ,NavSidebar 位 于 Content 之 前 , 这 是 
为 了 方便 将 两 者 都 向 左 浮动 ， 而 且 NavSidebar 会 位 于 左 侧 。 但 在 移动 版 中 ， 去 掉 浮 动 之 后 ， 由 于 
标记 会 按 先后 次 序 泻 染 , 最终 Navsidebar 会 出 现在 页 面 顶 部 , 把 Content 压 在 下 面 。 对 移动 用 户 而 
言 ， 这 种 布局 有 点 本 末 倒 置 ,因为 他 们 必须 先 向 下 滚动 页 面 , 在 一 堆 链 接 和 广告 之 后 才能 看 到 正 
文 内 容 。 

针对 类 似 的 问题 ,解决 方案 是 从 一 开始 就 不 要 像 原始 版 那样 排 布 标 记 ， 而 是 先 考 虑 移动 版 本 
需要 ， 然 后 再 用 额外 的 CSS 规 则 创建 想 要 的 多 栏 布 局 。 这 种 思路 就 是 所 谓 的 “移动 优先 ”设计 。 

具体 到 眼下 这 个 例子 ， 就 是 在 HTML 中 把 Content 放 在 NavSidebar 前 面 。 这 样 就 可 以 解决 移动 
版 本 中 的 页 面 布局 问题 , 但 同时 也 会 导致 边栏 在 完整 版 中 居 右 。 怎 么 办 ? 很 简单 ， 只 要 向 右 浮动 
Content 即 可 : 


.Content { 
float: right; 
width: 78%; 
} 
这 样 ，Content 依 然 位 居 右 侧 ，NavSidebar 还 是 左 栏 ， 与 图 7-5 所 示 的 完整 版 布局 毫 无 二 人 致 。 
此 时 , 我 们 还 得 考虑 再 添加 一 个 媒体 查询 块 , 针对 非常 宽 的 浏览 器 窗口 写 一 些 样式 。 比 如 为 
保证 文本 的 可 读 性 ， 将 正文 文字 分 成 多 栏 ( 使 用 6.4.6 节 介绍 的 技术 )。 









































提示 想 看 一 些 有 启发 性 的 例子 ? 那 好 ， 推 荐 你 关注 现成 的 响应 式 模板 。 网 上 有 很 多 ， 比 如 
http://html5up.net、www.typeandgrids.com， 还 有 http://responsify.it。 


7.2.4 媒体 查询 的 高 级 条 件 
有 时 候 ， 我 们 可 能 想 通过 媒体 查询 设 定 更 具体 的 样式 。 这 就 需要 用 到 更 多 条 件 了 ， 比 如 : 


@media (min-width: 400px) and (max-width: 700px) { 
/* These styles apply to windows from 400 to 700 pixels wide. */ 
这 种 媒体 查询 块 非常 适合 几 组 互相 排斥 的 样式 , 又 不 会 带 来 令 人 头疼 的 样式 分 层 问题 。 下 面 
是 几 个 例子 : 
/* Normal styles here */ 


@media (min-width: 600px) and (max-width: 700px) { 
/* Override the styles for 600-700 pixel windows. */ 


} 


@media (min-width: 400px) and (max-width: 599.99px) { 
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/* Override the styles for 400-600 pixel windows . */ 


@media (max-width: 399.99px) { 
/* Override the styles for sub-400 pixel windows. */ 


} 

如 果 浏 览 器 窗口 是 380 像 素 ， 就 会 应 用 两 组 样式 : 标准 样式 和 最 后 一 个 @media 块 中 的 样式 。 
这 种 方式 到 底 会 使 开发 工作 简化 还 是 复杂 化 ， 取 决 于 你 想 实现 的 结果 。 如 果 样 式 原本 就 复杂 ， 而 
修改 叉 很 多 ， 那 这 里 展示 的 非 全 加 方式 通常 是 最 简单 的 方式 。 

注意 ， 你 需要 自己 注意 样式 规则 不 会 意外 县 加 。 如 果 你 在 一 条 规则 里 设 定 的 最 大 宽度 是 400 
像素 ， 而 在 另 一 条 规则 设 定 的 最 小 宽度 同样 也 是 400 像 素 ， 那 这 两 条 规则 中 的 样式 就 可 能 受 加 。 
有 一 个 不 那么 优雅 的 方案 ， 就 是 使 用 小 数 ， 比 如 在 其 中 一 条 规则 写 399.99 像 素 。 

还 有 一 个 方案 ， 就 是 使 用 not 关 键 字 。 两 个 方案 在 功能 上 没有 差别 ， 你 喜欢 哪个 就 用 哪个 吧 : 


/* Normal styles here */ 




























































































@media (not max-width: 600px) and (max-width: 700px) { 
/* Override the styles for 600-700 pixel windows. */ 


} 


@media (not max-width: 400px) and (max-width: 600px) { 
/* Override the styles for 400-600 pixel windows. */ 


} 


@media (max-width: 400px) { 
/* Override the styles for sub-400 pixel windows. */ 


} 





隐藏 和 替换 <section> 

如 果 你 有 想法 ， 那 可 以 把 移动 版 改 得 更 好 ， 让 它 与 桌面 版 差别 更 大 。 上 比如， 可 以 使 用 CSS 
的 display 属 性 隐藏 或 显示 页 面 的 整个 csection>。 

但 在 动手 之 前 ， 我 想 先 说 说 这 么 做 的 坏处 。 切 换 页 面 中 较 大 的 <section> 可 能 导致 标记 混 
乱 ， 不 好 维护 ， 因 此 为 保证 一 致 性 ， 必 须 在 不 同 设备 中 测试 。 同 样 ， 如 果 隐 藏 的 分 区 里 包含 图 
片 ， 浏 览 器 仍然 会 下 载 它们 ， 只 是 不 显示 而 已 。 对 移动 设备 来 说 ， 这 无 疑 会 导致 性 能 问题 ， 同 
时 还 浪费 流量 。 

不 过 ,还 是 有 很 多 情况 适合 使 用 分 区 切换 技术 的 。 比 如 ， 把 复杂 的 导航 或 菜单 ， 替 换 成 轻 
量 简单 的 移动 版 。 最 常见 的 ， 就 是 在 移动 版 里 用 下 拉 菜 单 代 替 展 开 的 树 状 导航 。( 有 人 甚至 还 
为 此 写 了 一 个 样式 , 可 以 把 一 行 链接 转换 成 下 拉 列 表 , 详 见 : http://css-tricks.com/convert-menu- 
to-dropdown。 ) 

有 时 候 ,， 简单 的 调整 和 替换 还 不 够 你 可 能 想 让 移动 版 的 变化 更 大 一 些 。 极 端 情况 下 ， 你 
可 以 创建 一 个 单独 的 移动 网 站 ,托管 在 一 个 不 同 的 域名 下 ( 比如 《纽约 时 报 》 的 移动 版 : 
http://mobile.nytimes.com )。 这 样 做 的 工作 量 最 大 ， 如 果 不 使 用 内 容 管 理 系统 (CMS )， 很 难保 
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证 移动 网 站 与 标准 网 站 同步 。 还 有 一 种 策略 ,就 是 通过 服务 器 端 代 码 检 测 每 一 个 请 求 ， 确 认 浏 
览 器 来 自 移动 设备 还 是 桌面 设备 ,然后 分 别 发 送 不 同 的 内 容 。 这 种 方案 更 好 ， 当 然 对 你 的 时 间 
和 技能 也 是 个 挑战 。 

比较 好 接受 的 方式 ， 则 是 使 用 JavaScript 根 据 浏览 器 不 同 动态 修改 页 面 。 比 如 ， 可 以 使 用 
Modernizr 提 供 的 Modernizr.mq() 方 法 ， 测 试 代 码 中 的 媒体 查询 特性 ( 参见 http://modernizr.com/ 
docs )。 这 种 方法 比 媒 体 查 询 更 好 ， 可 是 也 增加 了 页 面 设计 的 复杂 度 。 





在 上 面 的 例子 中 , 还 是 存在 样式 有 至 加 的 情况 。 这 是 因为 emedia 块 要 建立 在 标准 的 非 媒体 查询 
的 样式 规则 之 上 。 建议 大 家 把 这 两 部 分 样式 分 开 保存 ( 比如 专门 将 适用 于 移动 设备 的 样式 保存 为 
一 个 文件 )。 而 分 开 保存 之 后 ， 就 需要 针对 外 部 样式 表 的 媒体 查询 了 。 


7.2.5 ”替换 整个 样式 表 


如 果 样 式 修改 不 多 ,使 用 @media 块 就 行 ， 所 有 样式 都 可 以 放 在 一 个 文件 里 。 但 如 果 要 修改 的 
地 方 很 多 , 那 可 能 创建 一 个 新 样式 表 会 更 便于 管理 。 创 建新 样式 表 之 后 ,可 以 使 用 媒体 查询 创建 
一 个 样式 表 链接 : 

<head> 


<link rel="stylesheet" href="standard.css"> 
<link rel="stylesheet" media="(max-width: 568px)" href="small styles.css"> 









































</head> 

这 样 ， 浏 览 器 会 下 载 第 二 个 样式 表 ( small_styles.css )， 但 只 有 在 页 面 宽度 小 于 5$68 像 素 时 才 
会 应 用 这 个 样式 表 。 

跟前 面 的 例子 一 样 ， 此 时 的 新 样式 会 与 已 经 存在 的 样式 加 。 某 些 情况 下 ， 可 能 需要 让 几 
个 样式 表 完 全 独立 ， 不 又 加 。 此 时 ， 就 要 为 标准 样式 表 添 加 一 个 媒体 查询 ， 保 证 它 在 大 窗口 下 
起 作用 : 


<link rel="stylesheet" media="(min-width: 568.01px)" href="standard.css"> 
<link rel="stylesheet" media="(max-width: 568px)" href="small styles.css"> 


这 种 方式 的 问题 在 于 ， 不 理解 媒体 查询 的 浏览 器 会 忽略 这 两 个 样式 表 。 为 了 兼容 旧版 本 IE， 
可 以 使 用 条 件 注释 引入 标准 样式 表 : 

<link rel="stylesheet" media="(min-width: 568.01px)" href="standard.css"> 

<link rel="stylesheet" media="(max-width: 568px)" href="small styles.css"> 

<!--[if lt IE 9]> 


<link rel="stylesheet" href="standard.css"> 
<!l[endif]--> 


这 个 例子 还 存在 一 个 盲区 。 旧 版 本 Firefox ( 3.5 之 前 ) 既 不 理解 媒体 查询 ,也 不 理解 正 的 条 件 
注释 。 可 以 通过 代码 检测 浏览 器 ,然后 再 用 JavaScript 切 换 页 面 , 但 这 样 有 点 乱 。 所 幸 的 是 ， 旧 版 
本 的 Firefox 越 来 越 少见 了 。 

偶尔 ， 也 可 以 试 着 组 合 使 用 媒体 查询 和 媒体 类 型 。 但 要 记 住 ， 一 定 要 把 媒体 类 型 放 在 前 头 ， 
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而 且 别 把 它 放 在 括号 里 。 下 面 是 两 个 打印 样式 表 的 例子 : 


<link rel="stylesheet" media="print and (min-width: 25cm)" 
href="NormalprintStyles.css" > 

<link rel="stylesheet" media="print and (not min-width: 25cm)" 
href="NarrowPrintStyles.css" > 





7.2.6 ”识别 特定 的 移动 设备 


如 前 所 述 ， 使 用 max-device-width 可 以 区 别 普通 计算 机 和 移动 设备 。 但 这 个 宽度 到 底 设 成 多 
大 合适 呢 ? 

如 果 想 检测 手机 ,那么 将 max-device-width 设 定 为 568 像 素 。 这 是 个 经 验 值 ,涵盖 目前 的 iPhone 
和 Android 手 机 ， 而 且 不 管 是 竖 向 还 是 横向 : 


<link rel="stylesheet" media="(max-device-width: 568px)" 
href="mobile styles.css"> 


如 果 你 对 硬件 很 了 解 ， 可 能 会 觉得 这 条 规则 太 简 单 粗 暴 了 。 毕 竟 ， 当 今 的 移动 设备 都 使 用 超 
高 分 状 率 的 屏幕 。 比 如 ，iPhone 5 的 分 辩 率 是 640 像 素 x 1136 像 素 。 因 此 ， 你 可 能 觉得 应 该 设 定 更 
大 的 宽度 来 识别 这 些 设备 。 但 实际 上 却 不 是 那么 回 事 。 

还 是 以 Phone 5 为 例 ， 尽 管 它 的 物理 像素 是 640 像 素 ， 但 它 会 声明 自己 的 CSS 像 素 为 320 像 素 
( 竖 向 )。 这样 是 为 了 避免 让 网 站 误 以 为 自己 是 大 屏幕 ， 而 显示 桌面 版 的 网 站 。iPhone 当 然 可 以 显 
示 桌 面 版 网 站 ， 但 像素 那么 小 ， 显 示 出 来 也 没 法 看 清 。 

最 新 的 高 分 辨 率 设 备 都 是 这 样 处 理 了 。 它 们 为 此 引入 了 一 个 比例 ， 叫 像素 比 (pixel ratio )。 
比如 ，iPhone (4 及 之 后 的 型 号 ) 用 两 个 物理 像素 对 应 一 个 CSS 像 素 ， 因 此 像素 比 是 2。 因 此 ， 可 
以 通过 下 列 媒 体 查询 来 识别 iPhone 4: 

<link rel="stylesheet" 


media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" 
href="iphone4.css"> 


表 7-2 列 出 了 几 种 流行 设备 的 宽度 ,这 里 面包 含 了 像素 比 的 概念 。 比 如 ， 所 有 iPad 都 会 报告 自 
己 的 宽度 是 768， 但 iPad 3 的 物理 像素 宽度 其 实 两 倍 于 此 。 


表 7-2 ”常见 设备 宽度 
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设 备 竖 向 宽度 横向 宽度 
iPhone 4 320 480 
iPhone 5 320 568 

iPad 768 1024 

三 星 Galaxy S4 360 640 
谷歌 Nexus 4 384 640 
Kindle Fire 600 1024 


提示 ”市面 上 的 新 设备 层出不穷 ， 要 了 解 最 新 信息 ， 请 参考 相关 网 站 。 
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iPad 等 平板 电脑 的 问题 更 多 ， 因 为 用 户 经 常会 改变 方向 。 改变 方 向 虽然 会 改变 max-width, 但 
不 会 改变 max-device-width。 无 论 竖 向 还 是 横向 , iPad 始 终 报告 自己 的 设备 宽度 为 768 像 素 。 好 在 ， 
我 们 可 以 组 舍 使 用 max-device-width 和 orientation 属 性 ， 以 便 区 别 iPad 的 方向 应 用 不 同 的 样式 : 


<link rel="stylesheet" 
media=" (max-device-width: 768px) and (orientation: portrait)" 
href="iPad portrait.css"> 

















<link rel="stylesheet" 
media=" (max-device-width: 768px) and (orientation: landscape)" 
href="iPad landscape.css"> 


当然 ， 这 条 规则 不 仅 限于 iPad， 其 他 屏幕 大 小 类 似 ( 768 像 素 或 更 小 ) 的 设备 也 适用 。 





注意 ”只 有 媒体 查询 不 足以 将 常规 网 站 转换 成 移动 友好 的 网 站 。 考 虑 到 用 户 体验 ， 你 可 能 还 得 
把 内 容 切 分 成 小 块 (减少 滚动 ) 去 掉 那 些 在 触摸 屏 上 难以 控制 的 效果 和 交互 手段 (如 弹 
出 菜单 )。 


媒体 查询 与 视频 
显示 视频 是 桌面 网 站 与 移动 网 站 的 一 个 主要 区 别 。 移动 网 站 当然 可 以 包含 视频 , 但 窗口 会 
更 小 , 而且 文件 也 会 更 小 。 一 方面 移动 浏览 器 速度 要 慢 一 些 , 流量 也 不 便宜 ， 另 一 方面 回放 的 
硬件 也 没有 桌面 电脑 那么 强 。 
使 用 我 们 学 到 的 媒体 查询 技术 ， 可 以 方便 地 修改 <video> 元 素 的 大 小 ， 适 应 移动 用 户 的 需 
求 。 但 接 下 来 才 是 关键 : 怎么 链接 到 切 分 后 的 小 视频 文件 ? 
HTML5 提 供 了 一 个 方案 ， 即 使 用 <source> 元 素 的 media 属 性 。 第 5 章 讲 过 ，<source> 元 素 用 于 
指定 <video> 元 素 播放 的 媒体 文件 。 通 过 添加 media 属 性 , 可 以 限制 某 些 设备 只 能 下 载 对 应 的 文件 。 
下 面 的 例子 展示 了 怎么 让 小 屏幕 设备 下 载 butterfly mobile.mp4， 让 其 他 设备 下 载 butterfly. 
Imp4 或 butterfly.ogV (看 支持 哪 种 视频 格式 ): 
<video controls width="400" height="300"> 
<source src="butterfly mobile.mp4" 
type="video/mp4" 
media=" (max-device-width: 480px)"> 
<source src="butterfly.mp4" 
type="video/mp4"> 
<source src="butterfly.ogv" 


type="video/ogg"> 
</video> 


你 可 以 针对 移动 用 户 将 视频 重新 编码 。 编码 工具 一 般 都 有 针对 设备 的 配置 文件 。 比如， 可 
能 会 有 一 个 选项 叫 “iPad 视 频 *。 另 外 ， 视 频 的 格式 也 取决 于 你 自己 (HH.264 很 常用 )。 
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第 8 共 


0 





基本 Canvas 绘 图 


如 我 们 在 第 1 章 介 绍 过 的 , HTML5 的 目标 之 一 就 是 让 网 页 中 的 富 应 用 实现 起 来 更 简单 。 
当然 ， 这 里 所 谓 的 “ 富 ” 指 的 可 不 是 你 银行 账户 中 的 钱 。 富 应 用 的 含义 包括 漂亮 的 网 
片 、 人 机 互动 功能 ， 以 及 耽 目 的 动画 效果 。 

Canvas 是 实现 富 应 用 最 重要 的 HTML5 工 具 之 一 ， 这 块 “画布 ”能 够 把 你 内 心 深 处 的 “ 毕 加 
索 ” 释 放出 来 。 与 其 他 HTML 元 素 相 比 ，“canvas> 独 特 的 地 方 是 需要 JavaScript 来 操作 。 不 使 用 
JavaScript， 就 无 法 绘制 图 形 ， 也 不 能 画 出 图 画 。 这 也 就 意味 着 <canvas> 是 一 个 编程 工具 ， 而 这 已 
然 超 出 了 Web 基 于 文档 的 设计 初衷 。 

表面 上 看 ， 使 用 canvas> 似 乎 就 是 把 简化 版 的 Windows“ 画 图 ”程序 硬 蹇 到 了 网 页 里 。 但 次 
和 人 之后, 你 会 发 现 这 个 元 素 是 一 切 高 级 图 形 应 用 的 核心 所 在 。 利 用 它 ,， 可 以 开发 出 很 多 你 梦 赤 以 
求 的 东西 ( 比如 游戏 、 地 图 和 动态 图 表 )， 也 可 以 开发 出 你 从 未 想 过 的 东西 ( 比如 音乐 灯光 秀 、 
物理 模拟 器 )。 在 不 远 的 过 去 ， 要 开发 出 这 些 东 西 ， 如 果 没 有 Flash 等 搬 件 是 极其 困难 的 。 而 今天 ， 
有 了 “canvas>， 这 一 扇 门 终于 敞开 了 。 只 要 你 愿意 ， 这 些 作品 就 可 以 从 你 的 手中 创造 出 来 。 

本 章 ， 我 们 学 习 如 何在 页 面 中 添加 <canvas>， 并 在 其 中 绘制 线条 、 曲 线 和 简单 图 形 。 然 后 ， 
学 以 致 用 , 开发 一 个 简单 的 绘图 程序 。 另 外 , 大 概 也 是 最 重要 的 , 我 们 会 讨论 怎么 让 包含 <canvas> 
的 页 面 在 不 支持 HTML5 的 旧 浏 览 器 中 正常 运作 。 














注意 “canvas> 对 某 些 开发 人 员 来 说 是 不 可 或 缺 的 ， 而 对 另 一 些 人 来 说 可 能 只 是 一 种 消遣 。( 还 
有 一 些 人 对 《canvas> 感 兴趣 ， 但 他 们 会 觉得 与 使 用 Flash 等 成 熟 的 编程 平台 相 比 ， 学 习 这 
门 新 技术 有 点 麻烦 。) 不 过 有 一 件 事 是 肯定 的 : 这 个 直观 的 绘图 界面 对 百 无 聊 赖 的 程序 员 
而 言 ， 绝 非 一 个 玩具 那么 简单 。 


8.1 ” Canvas 起步 


<canvas> 元 素 就 是 一 块 画 布 ， 就 是 你 提 笔 挥洒 写意 的 地 方 。 从 标记 的 角度 看 ， 它 简单 明了 ， 
只 要 给 它 指定 三 个 属性 即 可 : id、width 和 height。 


<canvas id="drawingCanvas" width="500" height="300"></canvas> 
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个 唯一 的 名 字 , JavaScript 脚 本 可 以 利用 它 找 到 这 块 “ 画 布 ”。 相 应 地 , width 
“画布 ”的 宽度 和 高 度 ， 单 位 是 像素 。 








三 


其 中 , id 属性 是 

和 height 属 性 指定 的 就 是 这 块 “ 

注意 一 定 妥 通过 Width 和 eight 属性 设置 4canvasy 的 富 和 高 ， 而 不 要 在 样式 表 中 设置 其 定 
高 度 。9.1.1 节 的 附注 栏 解释 了 如 果 通 过 样式 表 设 置 <canvas> 的 宽 和 高 会 导致 什么 

意思 就 是 你 看 不 到 它 )。 


时 
人 心 


<canvas> 在 页 面 上 会 显示 一 块 空白 、 无 边框 的 矩形 ( 
条 样式 规则 为 它 应 用 不 同 的 背景 颜色 或 者 边框 : 


























EL 度 和 
问题 。 








开始 的 时 候 ， 
为 了 让 它 在 页 面 显现 出 轮廓 ， 可 以 通过 



















































































canvas { 
border: 1px dashed black; 
. 
图 8-1 展 示 了 这 块 空 白 的 画布 。 
从 ET 图 8-1 : 每 个 <canvas> 一 开始 就 是 一 
DID chrvlschapte P - gx|| @ canvas Test 二 中 下 个 空白 的 和 矩形。 哪怕 要 在 上 面 国 一 
1 A 条 直线 , 你 都 得 编写 JavaScript 代 码 
100% 
宇 > 
开始 绘图 之 前 ， 需要 JavaScript 执 行 两 步 操作 。 首 先 ,利用 document .getElementById() 方 法 取 
得 <canvas> 对 象 。 这 个 例子 中 的 <canvas> 对 象 ID 是 drawingCanvas， 代 人 码 如 下 : 
var canvas = document.getElementById("drawingCanvas"); 
这 没有 什么 需要 解释 的 ， 当 你 需要 从 页 面 中 取得 某 个 HTML 元 素 时 ， 就 要 使 用 document .get- 
ElementById() 方 法 。 
注意 ”如果 你 不 熟悉 JavaScript， 也 不 要 着 急 。 学 会 基本 的 JavaScript 并 不 难 ， 看 看 附录 B 。 
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拿 到 了 <canvas> 对 象 ， 就 可 以 开始 第 二 个 必需 的 步骤 ， 调 用 <canvas> 对 象 的 getContext () 方 
法 ， 取 得 二 维 绘图 上 下 文 : 

var context = canvas.getContext("2d"); 

什么 是 绘图 上 下 文 ? 你 可 以 把 它 想象 成 一 个 超级 强大 的 绘图 工具 , 它 可 以 帮 你 完成 所 有 绘图 
任务 ， 比 如 绘制 算 形 、 输 出 文本 、 艇 入 图 像 …… 总 之 ， 所 有 绘图 操作 都 是 通过 它 来 完成 的 。 





注意 这 里 的 上 下 文明 确 地 称 为 “二 维 上 下 文 ”( 在 代码 中 用 2d 表 示 )， 可 能 就 会 有 读者 想 问 : 
那 有 没有 三 维 绘图 上 下 文 呢 ? 目前 还 没有 , 但 HTML5 的 制定 者 正在 考虑 ,将 来 就 会 有 的 。 





取得 了 上 下 文 对 象 之 后 ,任何 时 候 都 可 以 进行 绘图 了 。 比 如 ， 可 以 在 页 面 加 载 完 毕 后 、 用 户 
单 击 了 按钮 时 ,或 者 其 他 时 机 。 刚 开始 接触 ccanvas> 的 读者 ， 心 里 可 能 会 想 : 要 是 能 有 一 个 直观 
的 练习 页 面 就 好 了 。 好 吧 ， 下 面 就 是 那么 一 个 模板 页 面 : 


<!DOCTYPE htm]> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>Canvas Test</title> 
<style> 

canvas { 
border: 1px dashed black; 

















</style> 


<script> 

window.onload = function() { 
var canvas = document.getElementById("drawingCanvas"); 
var context = canvas.getContext("2d"); 





// (把 你 自己 的 绘图 代码 写 在 这 里 ) 
}; 

</script> 
</head> 





<body> 

<Canvas id="drawingCanvas" width="500" height="300"></canvas> 
</body> 
</html> 


页 面 的 cbody> 标 签 内 只 有 <canvas> 元 素 ， 没 有 别 的 。 代 码 中 的 <style> 部 分 为 <canvas> 加 了 边 
框 ， 以 便 它 在 页 面 中 显示 出 轮廓 来 。 而 <script> 部 分 则 主要 处 理 window.onload 事 件 ， 这 个 事件 是 
在 浏览 器 加 载 完 页 面 时 触发 的 。 然 后 ， 代 码 取得 了 <canvas> 对 象 ， 并 创建 了 绘图 上 下 文 ， 为 下 一 
步 绘图 作 好 准备 。 就 这 样 了 ， 接 下 来 你 就 可 以 用 这 个 页 面 作为 起 点 开始 试验 了 。 
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注意 ”当然 ， 如 果 是 在 真实 的 网 站 中 使 用 canvas>， 应 该 把 JavaScript 代 码 挪 到 一 个 外 部 文件 中 ， 
这 样 才能 保持 页 面 的 清晰 ( 相关 内 容 请 参见 附录 B )。 不 过 就 目前 来 讲 ， 把 所 有 东西 都 放 


在 一 个 页 面 里 可 以 让 试验 更 方便 。 建 议 读者 从 本 书 站 点 


( http://prosetech.com/html5 ) 下 


载 CanvasTemplate.html 文 件 ， 然 后 自己 动手 输入 下 面 的 示例 代码 。 


8.1.1 画 直 线 


现在 一 切 准备 就 绕 ， 可 以 绘图 了 。 等 一 等 ， 在 我 们 涂鸦 之 前 ， 还 得 先 了 解 一 个 基本 知识 点 : 








画布 的 坐标 系 。 图 8-2 展 示 了 “canvas> 中 坐标 系 的 概念 。 











[=is 


图 8-2: 与 其 他 HTML 元 素 一 样 ， 














| 名] CAHTMLS\Chapter P ~- OX | SS Canvas Test | | {ny 











I 1 


刀 一 150 像素 


4 一 一 250 像素 一 一 point (250.150) 





























<canvas> 坐 标的 左上 角 是 坐标 原点 
(0,0)。 向 右 移动 ，x 值 增 大 ， 向 下 
移动 ，y 值 增 大 。 对 于 500 像 素 x300 
像素 的 <canvas> 元 素来 说 ， 其 右 下 
角 坐 标 就 是 ( 500,300 ) 























最 简单 的 绘图 操作 就 是 画 一 条 实心 直线 。 为 此 ， 需 要 通过 绘图 上 下 文 执行 三 个 操作 。 首 先 ， 


使 用 moveTo() 方 法 找到 直线 的 起 点 。 其 次 , 使 用 lineTo() 方 法 在 起 点 和 终点 之 间 建 立 联系 。 最 后 ， 














调用 stroke() 方 法 ， 把 直线 实际 地 绘制 出 来 


Context .moveTo(10,10); 
Context.1ineTo(400,40); 
context. stroke(); 





如 果 你 觉得 不 好 理解 ， 也 可 以 这 么 想 : 首先 ， 拿 起 画笔 把 笔头 放 在 画布 上 的 某 一 点 (使 用 
moveTo 方 法 ), 然后 在 画布 上 画 直 线 ( 使 用 LineTo 方 法 ), 最 后 让 直线 显现 出 来 (使 用 stroke 方 法 )。 
结果 就 是 一 条 起 点 为 (10,10)， 终 点 为 (400,40) 的 1 像素 宽 的 黑色 直线 。 

不 止 如 此 ， 要 是 你 还 有 什么 创意 ， 也 是 可 以 美化 直线 的 。 在 调用 stroke() 方 法 把 直线 实际 地 
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绘制 出 来 之 前 ,你 可 以 在 任何 时 候 设置 绘图 上 下 文 的 3 个 属性 : lineWidth、strokeStyle 和 lineCap。 
这 几 个 属性 会 一 直 影 响 后面 的 绘图 操作 ， 除 非 再 修改 它们 的 值 。 

顾名思义 ， 使 用 linewidth 可 以 设置 线条 宽度 ， 单 位 是 像素 。 比 如 ， 要 绘制 10 像 素 粗 的 线条 ， 
就 要 这 样 设置 : 

context.lineWidth = 10; 

而 strokeSstyle 用 于 设置 线条 的 颜色 。 设 置 颜 色 可 以 使 用 HTML 颜 色 名 .HTML 颜色 编码 或 CSS 
中 的 rgb() 函 数 。 其 中 ， 使 用 rgb() 函 数 可 以 直接 指定 红 、 绿 、 蓝 三 个 分 量 的 比例 。( 这 种 方式 很 
有 用 ， 因 为 很 多 绘图 和 平面 处 理 软件 都 使 用 RGB 颜色 表示 法 。) 无 论 你 使 用 哪 种 方式 ， 都 需要 把 颜 
色 值 放 在 一 对 引号 内 ， 比 如 : 


// 使 用 HTML 颜 色 编码 设置 颜色 ( 砖 红 色 ) 
context.strokeStyle = "#cd2828"; 
































// 使 用 rgb() 函 数 设 置 颜色 ( 砖 红 色 ) 
context.strokeStyle = "rgb(205,40,40)"; 


注意 之 所 以 把 这 个 属性 命名 为 strokeStyle 而 不 是 strokeColor, 是 因为 通过 它 不 仅仅 可 以 设置 
颜色 。 下 一 章 我 们 就 会 介绍 到 ， 通 过 它 还 可 以 设置 叫做 渐变 的 混合 颜色 ( 参见 9.2.3 节 ) 
和 基于 图 像 的 图 案 ( 参见 9.2.2 节 )。 





最 后 ， 使 用 lineCap 可 以 设置 线条 两 端的 形状 ， 即 线头 类 型 。 默 认 值 是 butt， 即 方 头 。 另 外 ， 
还 可 以 使 用 round ( 圆 头 ) 或 square (效果 与 butt 类 似 , 也 是 方 头 , 但 会 在 线条 的 两 头 各 增加 一 半 
线 宽 的 长 度 ， 因 此 可 以 叫 “ 加 长 方 头 ”。) 

以 下 就 是 我 们 要 绘制 的 三 条 不 同 线头 水 平 线 的 全 部 脚本 代码 ( 结果 如 图 8-3 所 示 )。 要 试验 这 
些 代码 ， 可 以 把 它们 包装 到 一 个 函数 里 。 然 后 ， 在 前 面 介绍 的 window.onload 事 件 处 理 函 数 中 调 
用 它 即 可 : 


var canvas = document.getElementById("drawingCanvas"); 
var context = canvas.getContext("2d"); 














// 设 置 线条 宽度 和 颜色 (适用 于 所 有 线条 ) 
context.lineWidth = 20; 
context.strokeStyle = "rgb(205,40,40)"; 


// 绘 制 第 一 条 直线 ， 使 用 默认 的 方 头 
Context.moveTo(10,50); 
Context.1ineTo(400,50); 
context.lineCap = "butt"; 
context .stroke(); 


// 绘 制 第 二 条 直线 ， 使 用 圆 头 
context.beginpath(); 
context .moveTo(10,120); 
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Context.1ineTo(400,120); 
context.lineCap = "round"; 
context. stroke(); 


// 绘 制 第 三 条 直线 ， 使 用 加 长 方 头 
Context .beginPath(); 

Context .moveTo(10,190); 
Context.1ineTo(400,190); 
context.lineCap = "square"; 
context. stroke(); 


























Nr 瑟 呈 鹿 斑 | 图 8-3: 上 面 的 线 使 用 标准 的 方 头 ， 

| Duines [+| ”| 而 下 面 的 线 则 使 用 了 加 长 的 线头 

| | [| filei//C:/HTMLS5/Chapter06/Lines.html -CI 会 | 加; (一 个 加 长 圆 头 ,一 个 加 长 方 头 )， 

wi ”了 在 线 困 的 两 头 各 增加 一 半 绕 竟 
: 的 长 度 


PP PT ET Te 


























这 个 例子 中 又 介绍 了 一 个 新 的 特性 : 绘图 上 下 文 的 beginpath() 方 法 。 每 次 调用 beginpPath( ) 
方法 ， 都 重新 开始 一 个 新 线段 的 绘制 。 如 果 没 有 这 一 步 ， 那 么 每 次 调用 stroke() ， 都 会 把 画布 上 
原 有 的 线段 再 重新 绘制 一 遍 。 在 修改 了 其 他 上 下 文 属性 的 情况 下 ， 这 个 问题 会 比较 明显 。 就 以 上 
面 的 代码 为 例 ， 如 果 不 调用 beginPath() 的 话 ， 那 么 就 会 发 生 在 原 有 直线 上 以 新 颜色 、 新 宽度 或 
新 线头 形状 重新 绘制 的 问题 。 





























注意 尽管 开始 绘制 新 线段 时 要 调用 beginPath()， 但 结束 绘制 线段 则 不 一 定 要 做 什么 。 每 次 开 
始 新 路 径 时 ， 原 来 的 路 径 就 会 自动 “完成 ”。 


8.1.2 ”路 径 与 形状 


为 了 确保 三 条 直线 各 自 独立 ， 上 一 个 例子 将 每 条 直线 都 按照 新 路 径 来 绘制 。 这 样 可 以 为 不 同 
的 直线 分 别 应 用 不 同 的 颜色 〈 以 及 不 同 的 线 宽 和 线头 )。 实 际 上 ， 路 径 本 身 也 是 很 有 用 的 ， 因 为 
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可 以 通过 路 径 来 填充 自 定义 的 形状 。 例 如 ， 以 下 代码 可 以 绘制 出 红色 的 空心 三 角形 : 


context .moveTo(250,50); 
context.1lineTo(50,250); 
context .lineTo(450,250); 
context.1lineTo(250,50); 


context.lineWidth = 10; 
context.strokeStyle = "red"; 
context .stroke(); 


不 过 ， 如 果 想 给 这 个 三 角形 填 上 颜色 ， 那 么 stroke() 方 法 是 无 能 为 力 的 。 此 时 ， 应 该 先 调用 
closepath() 来 明确 地 关闭 路 径 ， 然 后 再 把 fillstyle 属 性 设置 为 想 要 填充 的 颜色 ， 最 后 再 调用 
fil1() 方 法 完成 填充 操作 : 

context.closepath(); 


context.fillsStyle = "blue"; 
Context.fil1(); 


这 个 例子 还 有 两 个 地 方 有 必要 调整 一 下 。 首 先 ,如 果 知 道 最 后 会 关闭 路 径 , 那 实际 上 就 不 必 
再 绘制 最 后 一 条 线段 了 ， 因 为 closepath() 会 自动 在 最 后 一 个 绘制 点 与 绘制 起 点 间 绘制 一 条 线 。 
其 次 , 最 好 是 先 填 充 形 状 , 然后 再 绘制 其 轮廓 。 否则 , 形状 的 轮廓 线 会 有 一 部 分 被 填充 色 覆 盖 掉 。 

好 了 ， 下 面 就 是 绘制 三 角形 的 完整 代码 ; 


var canvas = document.getElementById("drawingCanvas"); 
var context = canvas.getContext("2d"); 






















































































context .moveTo(250,50); 
context.1lineTo(50,250); 
context .lineTo(450,250); 
context.closepath(); 


// 填 充 内 部 
context.fillstyle = "blue"; 
context.fill(); 





// 绘 制 轮 廉 

context.lineWidth = 10; 
context.strokeStyle = "red"; 
context .stroke(); 


有 读者 可 能 已 经 注意 到 了 , 这 个 例子 并 没有 调用 beginPath() 方 法 。 这 是 因为 <ccanvas> 在 开始 
的 时 候 ， 会 自动 开始 一 段 新 路 径 。 如 果 你 想 重新 开始 另 一 段 路 径 ， 那 就 要 调用 beginpath()。 重 
新 开始 新 路 径 意 味 你 可 能 重新 设置 了 线条 的 样式 , 或 者 准备 绘制 男 外 一 个 新 的 形状 。 图 8-4 展 示 
了 运行 以 上 代码 的 结 
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| Lines 
€ C Of 














[leis 图 8-4， 











二 | 形 的 封闭 形状 , 使 用 moveTo() 方 法 
leVWCVHTML5/Chapter%2006/Triangle.html wi 定位 起 点 , 使 用 1ineTo() 方 法 绘制 


填充 ， 





每 一 条 线段 ， 然 后 用 closepPath() 
补充 完成 路 径 。 然后 再 调用 fi11() 


要 创建 一 个 类 似 这 个 三 角 











调用 stroke() 描 边 




















注意 在 绘制 前 后 相连 的 线段 时 ( 比如 上 面 例子 中 的 三 角形 )， 可 以 通过 设置 绘图 上 下 文 的 
lineJoin 属 性 指定 线段 交点 的 形状 。 这 个 属性 的 默认 值 是 mitre (锐角 斜 接 )， 另 外 两 个 值 


是 round 


多 数 情况 下 ， 如 果 想 要 绘制 复杂 的 形态 ， 


( 圆 头 ) 和 bevel (平头 斜 接 )。 


你 都 需要 自己 逐个 线段 地 绘制 。 但 有 一 个 例外 , 那 





就 是 绘制 矩形 。 可 以 使 用 fillRect() 方 法 直接 填充 一 个 矩形 区 域 。 只 要 为 它 提 供 和 矩形 区 域 左上 角 





的 坐标 、 宽 度 和 高 度 即 可 。 
例如 ， 要 在 (0,10) 点 放置 一 个 100 像 素 x 200 像 素 的 矩形 ， 可 以 使 用 以 下 代码 : 


fillRect(0,1 


与 fi11() 方 


0,100,200); 


法 一 样 ，fillRect() 也 是 从 绘图 上 下 文 的 人 llstyle 属 怕 


























类 似 地 ， 还 有 一 个 strokeRect() 方 法 ， 用 于 直接 绘制 一 个 矩形 框 : 


strokeRect(0 





,10,100,200); 





E 取 得 颜色 。 


绘制 矩形 框 时 ，strokeRect() 的 宽度 取 自 Linewidth 属 性 ， 而 边框 宽度 和 颜色 则 取 自 








strokeStyle 属 改 


FE， 与 stroke() 方 法 一 样 。 


8.1.3 ”绘制 曲线 


要 是 除了 和 矩形 和 直线 之 外 ， 你 还 想 弄 点 别 的 更 有 意思 的 ( 谁 不 想 呢 )， 那 就 得 理解 绘制 曲线 
的 四 个 方法 : arc() 、artTo() 、pezierCurveTo() 和 quadraticCurveTo()。 使 用 这 几 个 方法 分 别 能 





够 以 不 同 的 方式 绘制 曲线 , 但 共同 点 是 它们 都 要 求 你 做 一 点 简单 的 数学 计算 ( 有 时 候 计 算 量 还 是 
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蛮 大 的 )。 

这 四 个 方法 里 面 ，arc() 是 最 简单 的 ， 它 可 以 绘制 一 段 圆 踊 。 在 画 圆 弧 之 前 ， 你 可 以 先 财 上 
眼睛 ， 想 象 有 那么 一 个 加 ， 而 你 想 绘制 的 圆 孤 就 是 这 个 加 上 的 一 部 分 ， 如 图 8-5 所 示 。 然 后 ， 你 
就 可 以 对 要 传 给 arc() 方 法 的 参数 做 到 胸有成竹 了 。 
































1.5 pi 图 8-5: 圆 缴 看 起 来 简单 ， 但 要 描 
述 它 得 需要 多 方面 的 信息 。 首 先 ， 
需要 确定 一 个 想象 中 的 圆 形 。 而 确 
定 圆 形 就 必须 有 圆心 的 坐标 ( #1 ) 
和 表示 大 小 的 半径 ( 机 ) 。 然 后 ， 
为 了 描述 圆 弧 的 长 度 ,必须 知道 其 
起 点 的 角度 ( #3 ) 和 终点 的 角度 

( 主 ) 。 这 两 个 角度 都 要 用 弧度 表 
示 ， 即 常量 pi 的 倍数 ( 1pij 是 半 
2 pi 是 整个 圆 形 ) 






















































































起 点 角度 (#3) 

































































贺 


















































想 通 了 所 有 细节 之 后 ， 接 下 来 就 是 调用 arc() 方 法 : 


var canvas = document.getElementById("drawingCanvas"); 
var context = canvas.getContext("2d"); 

















// 创 建 变量 ,保存 圆 绝 的 各 方面 信息 
var centerX = 150; 

Var centerY = 300; 

var radius = 100; 

var startingAngle = 1.25 * Math.PI; 
var endingAngle = 1.75 * Math.PI; 








// 使 用 确定 的 信息 绘制 圆 弧 
context.arc(centerX, centerY, radius, startingAngle, endingAngle); 
context .stroke(); 


如 果 在 调用 stroke() 之 前 调用 closePath(), 就 会 在 圆 弧 的 起 点 和 终点 之 间 绘 制 一 条 直线 。 于 
是 ， 就 可 以 得 到 一 个 封闭 的 小 半圆 。 

实际 上 , 圆 形 也 就 是 这 么 个 圆 弧 继续 向 两 端 伸展 构成 的 。 因 此 如 有 果 想 画 一 个 整 圆 ， 可 以 这 样 
设置 : 

var canvas = document.getElementById("drawingCanvas"); 

var context = canvas.getContext("2d"); 









































var centerX = 150; 

Var centerY = 300; 

var radius = 100; 

var startingAngle = 0; 

var endingAngle = 2 * Math.PI; 


Ll 
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context.arc(centerX, centerY, radius, startingAngle, endingAngle); 


context. stroke(); 


注意 使 用 arc() 方 法 和 画 不 了 椭圆 ( 扁 圆 )。 要 画 椭 圆 ， 要 么 使 用 接 下 来 我 们 会 介绍 的 更 复杂 的 
绘制 曲线 的 方法 ， 要 么 使 用 变换 ( 参见 8.1.4 节 ) 把 普通 的 圆 拉 伸 成 椭圆 。 





接 下 来 要 介绍 的 三 个 方法 (artTo() 、bezierCurveTo() 和 quadraticCurveTo() ) 需要 你 承受 一 
些 几何 计算 方面 的 挑战 。 这 三 个 方法 要 用 到 同一 个 概念 : 控制 点 。 控制 点 本 身 并 不 包含 在 最 终 的 























曲线 里 , 但 能 够 影响 曲线 最 终 的 形状 。 最 好 的 例子 就 是 贝 塞 尔 曲 线 ， 几乎 任何 插图 软件 中 都 会 用 


到 它 。 贝 塞 尔 曲 线 之 所 以 那么 流行 ， 就 是 因为 这 种 出 





























可 以 。 图 8-6 展 示 了 贝 塞 尔 曲 线 的 控制 点 。 














H 线 能 够 保证 平滑 ， 哪 怕 再 小 、 再 大 的 弧度 都 

















第 一 个 控制 点 图 8-6: 一 条 贝 塞 尔 曲 线 有 两 个 控制 点 。 曲 线 的 起 点 切线 连接 第 
一 个 控制 点 ， 终 点 切线 连接 第 二 个 控制 点 。 两 条 连接 线 之 间 就 





是 曲线 。 曲 线 的 弯 


力 越 大 


第 二 个 控制 点 





























程 


























离 决定 。 距 离 越 远 ， 弯 








度 ( 曲率 ) 由 控制 点 与 起 点 和 终点 的 距 

















| 度 越 大 。 这 有 点 像 引力 ， 只 不 过 越 远 

















以 下 就 是 用 于 创建 图 8-6 所 示 曲 线 的 代码 : 


var canvas = document.getElementById("drawingCanvas"); 
var context = canvas.getContext("2d"); 


// 把 笔 移动 到 起 点 位 置 
context.moveTo(62, 242); 


// 创 建 变量 ,保存 两 个 控制 点 及 曲线 终点 信息 


var control1 x = 187; 
var control1 y = 32; 
Var control2 x = 429; 


var control2 y = 480; 
var endPointX = 365; 
var endPointY = 133; 
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// 绘 制 曲 线 


context.bezierCurveTo(control1 x, control1 y, control2 x, control2 y， 


endPointX, endPointY); 
context. stroke(); 























复杂 而 自然 的 形状 通常 需要 多 个 圆 弧 和 曲线 拼接 而 成 。 完 成 之 后 ， 可 以 调用 closePath() 以 
便 填充 , 或 者 显示 出 完成 的 轮廓 。 学 习 绘 制 曲线 的 最 好 方式 ， 就 是 自己 动手 编写 代码 。 为 此 ,本 
书 为 读者 推荐 一 个 不 错 的 测试 页 面 ，http://tinyurl.com/html5bezier ( 如 图 8-7 所 示 )。 

















Pe [= 5 
[DD Canvas Bézier Cuve Example 十 > 

| 
€) | http;//blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html -CI 会 | 可 || 


Canvas Bezier Curve Example | 
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\ 





This demonstration shows how 
bezier curves can be drawn on a 
canvas element. Drag the line 
ends or the control points to 
change the curve 


For more information, please 
refer to: 

How to Draw Bezier Curves on an 
HIMI nv: | 


See also: 
How to Draw Quadratic Curves on 
an HTML5 Canvas 


Disclaimer 


RN The code was developed by 
% Craig Ruckler of 
、 OptimalWorks net for 
© SitePoint. com 





This code can be used without 
any restrictions but please don't expect 24/7 support! A link back to SitePoint com is appreciated. 


























图 8-7: 在 图 


























码 ， 复 和 














同样 的 








线 。 这 里 





中 所 示 的 这 个 页 面 ( http:/ 
tinyurl.com/html5bezier ) 里 ， 可 以 拖 动 控 
制 点 、 起 点 和 终点 


任意 改变 其 中 贝 塞 尔 

















的 二 次 











quadratic 





应 的 HTML5 绘 
I 下 来 就 能 在 自己 的 页 面 中 创建 
还 有 一 个 所 见 即 所 得 
1 线 试 验 页 面 tinyurl.com/html5- 


线 的 形状 。 更 重要 的 是 ， 拖 动 过 程 中 ， 
页 面 会 为 你 生成 相 


图 代 














8.1.4 变换 


变换 ， 就 是 一 种 通过 变化 <canvas> 坐 标 系 达到 绘制 目的 的 技术 。 例 如 ， 假 设 你 想 在 三 个 地 方 
绘制 相同 的 正方 形 。 为 此 ， 可 以 调用 三 次 rect() ， 每 次 都 传人 不 同 的 起 点 位 置 : 





var canvas = document.getElementById("drawingCanvas"); 


var context = canvas.getContext("2d"); 


// 在 三 个 地 方 绘制 同样 大 小 (30x30) 的 正方 形 
context.rect(0, 0, 30, 30); 
context.rect(50, 50, 30, 30); 
context.rect(100, 100, 30,30); 


context. stroke(); 


或 者 ， 也 可 以 在 同一 个 地 方 调用 三 次 rect(), 但 每 次 都 移动 一 下 坐标 系 ， 最终 也 能 达到 在 三 
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个 不 同位 置 绘制 正方 形 的 目的 ， 比 如 : 








var canvas = document.getElementById("drawingCanvas"); 
var context = canvas.getContext("2d"); 


// 在 (0,0) 点 绘制 正方 形 
context.rect(0, 0, 30, 30); 


// 把 坐标 系 向 下 、 向 右 各 移动 50 像 素 
context.translate(50, 50); 
context.rect(0, 0, 30, 30); 


// 把 坐标 系 再 向 下 移 一 点 ; 变换 是 可 以 累积 的 
// 因 此 现在 (0,0) 点 实际 上 将 被 平移 到 (100,100) 
context.translate(50, 50); 

context.rect(0, 0, 30, 30); 


context. stroke(); 


“数学 恐惧 症 患者 ”的 绘图 秘诀 


谁 能 告诉 我 不 用 费 脑 子 也 能 画 出 这 些 图 形 的 方法 ? 


如 果 你 希望 用 ccanvas> 创 作出 夺 人 眼目 的 图 形 , 但 又 不 愿意 复习 几何 知识 ， 鸭 怕 会 有 点 进 
退 两 难 。 但 你 是 幸运 的 , 下 面 本 书 就 给 你 推荐 几 个 方法 , 让 人 不 用 关心 数学 也 能 画 出 自己 想 


的 效果 。 


口 使 用 绘图 库 。 了 既然 有 现成 的 绘图 库 可 以 拿 来 绘制 辆 形 、 三 角形 、 椭 圆 形 和 多 边 形 ， 那 为 


啥 还 自己 一 笔 一 笔 地 画 呢 ? 绘图 库 的 设计 思路 很 简单 ， 它 们 提供 很 多 高 级 方法 ( 比如 ， 
用 fillEllipse() 和 坐标 值 就 能 绘制 柄 圆 )， 但 底层 使 用 JavaScript 帮 你 完成 正确 的 
<canvas> 操 作 。Fabric.js( http://fabricjs.com ) 和 KineticJS (http:/kineticjs.com ) 就 是 两 
个 绘图 库 。 但 这 两 个 (以 及 更 多 ) 库 还 在 快速 发 展 ， 现 在 预言 哪个 库 最 终 能 坚持 下 来 还 
为 时 尚 早 ， 但 你 可 以 到 目前 流行 的 Stack Overflow 网 站 (http://tinyurl.com/canvas- 
libraries ) 读 一 下 关于 二 者 的 争论 和 一 些 开发 者 的 建议 。 





口 绘制 位 图 , 与 其 化 费 苦 心地 在 <canvas> 上 绘图 , 不 如 找 一 张 现成 的 图 片 误 入 到 <canvasy 


中 。 比 如 ， 要 是 有 一 个 名 为 circle.png 的 圆 形 图 案 ， 可 以 用 9.1.1 节 介绍 的 方式 把 它 插 入 
到 <canvas> 中 。 不 过 ， 揪 入 图 片 会 失去 一 些 灵活 性 (比如 ， 拉 伸 、 调 整 或 删除 其 某 一 
部 分 等 )。 


口 使 用 时 出 工具 。 如 果 图 形 比 较 复杂 ,而 你 需要 在 ccanvas> 上 操作 它 , 或 者 想 通 过 它 实现 


交互 ， 那 么 绘制 位 图 的 方法 就 不 够 好 了 。 在 这 种 情况 下 ， 如 果 有 一 个 图 形 到 <canvas> 代 
码 的 转换 工具 会 比较 好 。 显然, 是 有 这 种 工具 的 ,比如 针对 Adobe Illustrator 的 Ai>Canvas 
播 件 〈http://visitmix.conylabs/ai2canvas/ )， 能 够 把 Adobe Illustrator 的 插画 转换 成 HTML 
网 页 ， 并 通过 JavaScript 代 码 在 <canvas> 上 重新 创建 相同 的 图 形 。 
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以 上 两 段 代 码 得 到 的 结果 都 一 样 : 在 三 个 不 同位 置 绘制 三 个 相同 的 正方 形 。 

表面 上 看 , 变换 不 过 就 是 把 一 些 复杂 的 绘图 任务 变 得 更 加 复杂 了 。 但 在 处 理 一 些 环 手 问题 的 
场合 ， 使 用 变换 却 能 收 到 神奇 的 效果 。 例 如 ， 假 设 你 有 一 个 函数 ， 负 责 绘制 一 系列 复杂 的 图 形 ， 
最 终 再 将 它们 组 合成 一 幅 鸟 的 图 片 。 现 在 ， 你 准备 让 鸟 动 起 来 ， 在 <canvas> 区 域 里 飞翔 。( 9.4 节 
将 介绍 在 <canvas> 上 生成 动画 。) 

如 果 没 有 变换 ,要 实现 这 个 目标 必须 在 每 次 绘制 鸟 的 时 候 调 整 一 次 坐标 。 而 有 了 变换 , 绘图 
代码 可 以 不 变 ， 只 要 反复 修改 坐标 系 的 位 置 就 好 了 。 

使 用 变换 有 几 种 不 同 的 方式 。 在 前 面 的 例子 中 ， 我 们 使 用 平移 (translate ) 变换 移动 了 坐标 
系 的 原点 一 一 也 就 是 (0,0) 点 ,默认 位 置 在 ccanvas> 的 左上 角 。 除 了 平移 变换 之 外 , 还 有 缩放 (scale ) 
变换 、 旋 转 (rotate ) 变换 和 和 珑 阵 ( matrix ) 变换 。 缩 放 变换 可 以 把 本 来 要 绘制 的 形状 放大 或 缩小 ， 
旋转 变换 可 以 旋转 坐标 系 。 和 矩阵 变换 更 复杂 一 些 , 但 可 以 在 任意 方向 拉 伸 和 扭曲 坐标 系 ， 要 求 你 
必须 理解 复杂 的 和 矩阵 计算 ， 只 有 这 样 才 能 实现 自己 想 要 的 视觉 效果 。 

变换 是 累积 的 。 比 如 ,下 面 这 个 例子 先 使 用 translate() 方 法 把 坐标 系 从 (0,0) 平 移 到 (100,100)， 
然后 又 在 新 位 置 使 用 rotate() 方 法 把 坐标 系 旋转 了 几 次 。 每 旋转 一 次 , 都 会 绘制 一 个 新 的 正方 形 ， 
从 而 得 到 如 图 8-8 所 示 的 图 形 。 






































ES ksis 图 8-8: 通过 绘制 一 系列 旋转 的 正方 形 ， 可 以 生成 类 似 方 
| Transforms 由 ~ 形 螺 线 的 图 案 





万 /站 | Transforms.html -|C| 合 | 镍 可， | 





























var canvas = document.getElementById("drawingCanvas"); 
var context = canvas.getContext("2d"); 





// 移 动 (0,0) 点 。 这 一 步 很 重要 
// 因 为 接 下 来 要 围绕 新 原点 旋转 
context.translate(100, 100); 





// 绘 制 10 个 正方 形 
var copies = 10; 
for (var i=1; i<copies; i++) { 
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// 绘 制 正方 形 之 前 ， 先 旋转 坐标 系 
// 旋 转 一 周 是 2*Math.PI， 因 此 每 个 正方 形 的 旋转 角度 取决 于 要 绘制 的 总 数 
context.rotate(2 * Math.PI * 1/(copies-1)); 


// 绘 制 正 方形 
context.rect(0, 0, 60, 60); 


context. stroke(); 


提示 调用 绘图 上 下 文 的 save() 方 法 可 以 保存 坐标 系 当 前 的 状态 。 然 后 ， 再 调用 restore() 方 法 
可 以 返回 保存 过 的 前 一 个 状态 。 如 果 要 保存 坐标 系 的 状态 ， 必 须 在 应 用 任何 变换 之 前 调 
用 save()， 这 样 再 调用 restore() 才 能 把 坐标 系 恢复 到 正常 状态 。 而 在 多 步 操作 绘制 复杂 


图 形 时 ， 往 往 都 需要 多 次 保存 坐标 系 状态 。 这 些 状态 就 如 同 浏览 器 中 的 历史 记录 一 样 。 
每 次 调用 Testore()， 坐 标 系 就 会 恢复 到 前 一 个 最 近 的 状态 。 





详细 讨论 变换 超出 了 本 章 范 围 . 如 果 你 想 全 面 深 入 地 了 解 变换 ,可 以 参考 Mozilla( 开发 Firefox 
浏览 器 的 公司 ) 的 文档 : http://tinyurl.com/canvas-transforms。 


8.1.5 ”透明度 


到 现在 为 止 ， 我 们 一 直 都 在 使 用 实心 颜色 。 实 际 上 ，<canvas> 支 持 使 用 半 透 明 的 颜色 ， 从 而 
实现 多 个 形状 到 加 透视 的 效果 。 有 两 种 创建 透明 图 形 的 方式 ， 第 一 种 就 是 使 用 rgba() 函数 设置 透 
明 颜 色 〈 即 设置 fillstyle 和 strokeStyle 属 性 )， 而 不 是 使 用 rgb() 函 数 。 注 意 ，zrgba() 函 数 接收 4 
个 参数 : 红 、 绿 、 蓝 颜色 分 量 (0~ 255 ) 和 颜色 的 不 透明 度 值 。 最 后 一 个 参数 ( alpha ) 值 为 1， 
表示 完全 不 透明 ， 值 为 0 表示 完全 不 可 见 。 位 于 0 和 1 之 间 的 值 ( 比如 0.5 )， 表 示 颜 色 部 分 透明 ， 
即 透 过 它 能 看 到 下 方 的 形状 。 






































注意 ”哪些 内 容 在 下 ,哪些 内 容 在 上 ， 完 全 取决 于 绘制 操作 的 先后 顺序 。 比 如 ， 先 画 一 个 圆 形 ， 
再 在 相同 位 置 上 画 一 个 正方 形 ， 则 正方 形 会 登 加 在 圆 形 上 面 。 


下 面 这 个 例子 绘制 了 一 个 圆 形 和 一 个 三 角形 。 使 用 的 颜色 相同 , 但 三 角形 的 不 透明 度 值 被 设 
置 为 0.5， 因 此 是 半 透 明 的 : 


var canvas = document.getElementById("drawingCanvas"); 
var context = canvas.getContext("2d"); 











// 设 置 填充 及 描 边 颜色 

context.fillStyle = "rgb(100,150,185)"; 
context.lineWidth = 10; 
context.strokeStyle = "red"; 
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// 绘 制 圆 形 





context.arc(110, 120, 100, 0, 2*Math.PI); 


context .fill(); 
context. stroke(); 


// 别 忘 了 调用 beginPath()， 然 后 再 绘制 新 形状 
// 否 则 ， 两 个 形状 的 路 径 会 意外 地 连 在 一 起 
context.beginpath(); 


// 用 半 延 明 的 颜色 填充 三 角形 
context .fil1Style = "rgba(100,150,185,0.5)"; 


// 好 了 ， 绘制 三 角形 
context .moveTo(215 


,50); 


context.lineTo(15,250); 


Context.1ineTo(315 


,250); 


context.closepath(); 


context .fill(); 
context. stroke(); 


图 8-9 是 这 个 例子 的 结果 。 











图 8-9: 左 : 两 个 实心 、 蕾 加 在 一 起 的 图 形 。 右 : 底下 的 圆 形 是 实心 
的 ， 上 面 的 三 角形 是 半 透 明 的 。 半 透明 的 形状 看 起 来 较 明亮 ( 因为 
透 过 它们 能 看 到 白色 背景 ) ， 透 过 它们 可 以 看 到 下 方 的 内 容 。 注 意 
这 个 例子 中 的 三 角形 是 半 透 明 的 ， 但 三 角形 的 边框 则 使 用 了 实 色 


























第 二 种 创建 透明 图 形 的 方式 是 设置 绘图 上 下 文 的 globalAlpha 属 性 : 


context.globalAlpha = 0.5; 


// 此 时 ， 再 设置 的 颜 


色 不 透明 度 值 都 将 是 0.5 


context .fillstyle = "rgb(100,150,185)"; 


这 样 一 来 , 后 续 所 有 绘图 操作 都 会 取得 相同 的 不 透明 度 值 ， 也 就 是 会 有 相同 的 透明 度 ( 直至 


再 次 修改 globalAlpha 











属性 )。 包 括 描 边 颜色 和 填充 颜色 。 


哪 种 方式 更 好 一 些 呢 ? 如 果 你 只 需要 一 种 透明 的 颜色 ,使 用 rgba() 就 好 了 。 如 果 你 需要 使 用 
不 同 的 颜色 绘制 很 多 形状 ， 但 每 个 形状 的 透明 度 不 一 样 ， 可 以 使 用 globalAlpha。 另 外 ， 如 果 你 
想 在 <canvas> 上 绘制 半 透 明 的 图 像 ， 也 要 用 到 globalAlpha 属 性 (参见 9.3.2 节 )。 


8.1.6 合成 操作 


本 章 到 现在 一 直 假 设 在 绘制 多 个 图 形 时 , 后 绘制 的 图 形 会 位 于 先 绘制 的 图 形 上 方 , 并 遮 住 先 
绘制 的 图 形 。 使 用 <canvas> 绘 图 时 ， 多 数 情 况 下 都 是 这 样 的 。 然 而 ，<canvas> 也 支持 更 复杂 的 合 








成 操作 。 
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所 谓 合成 操作 , 就 是 告诉 <canvas> 怎 么 显示 两 个 重 县 的 图 形 。 默 认 的 合成 操作 是 source-over， 
即 新 绘制 的 图 形 会 位 于 先 绘制 的 图 形 之 上 ( 即 履 盖 在 第 一 个 图 形 上 )。 如 果 新 图 形 和 第 一 个 图 形 
重 压 ， 新 的 会 遮盖 第 一 个 。 











注意 ”在 合成 操作 的 术语 中 ， 源 是 指正 在 绘制 的 图 形 ， 目 标 是 指 画布 上 已 经 绘制 的 内 容 。 


还 有 其 他 很 多 种 合成 方式 。 比 如 ， 可 以 用 xor， 它 告诉 <canvas> 不 显示 两 个 图 形 相 互 重 闪 的 
部 分 。 图 8-10 展 示 了 不 同 合成 操作 的 结果 。 


图 8-10: 这 里 是 11 种 可 能 的 合成 操作 及 其 效果 。 
之 前 是 12 种 ,但 不 同 的 浏览 器 对 darker 计 算 的 表 
J 现 不 一 样 ， 所 以 这 里 把 它 去 掉 了 


SOUTCe-OVver Source-In source-out source-atop 


号 are 


destination-over destination-in destination-out destination-atop 


BleD 


lighter copy 
































要 改变 <canvas> 当 前 使 用 的 合成 操作 方式 ， 只 要 在 画 后 面 的 图 形 之 前 设置 绘图 上 下 文 的 
globalCompositeOperation 属 性 即 可 ， 代 码 如 下 : 

context.globalCompositeOperation = "xor"; 

比如 ， 要 创建 图 8-10 右 上 角 所 示 的 source-atop 合 成 操作 ， 可 以 用 下 面 这 段 代 码 : 


var canvas = document.getElementById("drawingCanvas"); 
var context = canvas.getContext("2d"); 





// 绘 制 矩 形 
context.fillstyle = "blue"; 
context.fillRect(15,15,70,70); 


// 选 择 globalCompositeOperation 
context.globalCompositeOperation = "source-atop"; 


// 在 上 方 绘制 圆 形 
context.fillstyle = "red"; 
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context.beginpath(); 
context.arc(75, 75, 35, 0, Math.PI*2, true); 
context.fill(); 


只 要 运用 得 当 , 利用 合成 操作 可 以 迅速 实现 一 些 特定 的 绘图 任务 ， 比 如 绘制 复杂 的 图 形 。 一 
些 厉害 的 程序 员 甚至 用 这 些 合成 操作 减少 绘图 操作 次 数 ， 以 提升 绘图 性 能 。 

在 不 久 的 过 去 ,不同 浏览 器 对 某 些 合成 操作 的 处 理 方式 没有 达成 一 致 。 幸 运 的 是 , 现在 已 不 
存在 这 些 问 题 ， 唯 一 的 问题 是 要 兼容 旧版 浏览 器 。 现 在 ， 唯 一 支持 合成 操作 的 兼容 方案 是 
FlashCanvas Pro (参见 8.3.2 节 )。 


8.2 ”构建 基本 的 画图 程序 


要 介绍 的 <canvas> 的 功能 还 有 很 多 。 不 过 ， 经 过 本 章 到 现在 的 学 习 ， 我 们 已 经 有 足够 的 基础 
知识 构建 一 个 基于 <canvas> 的 画图 程序 了 。 图 8-11 就 是 本 节 我 们 要 构建 的 基本 的 画图 程序 。 

实现 这 个 程序 的 JavaScript 代 码 比 我 们 前 面 看 到 的 所 有 代码 都 要 长 ,但 实际 上 却 仍然 非常 好 理 
解 。 接 下 来 儿 小 节 ， 我 们 就 逐一 分 析 每 一 段 代码 。 





























提示 “如 果 有 读者 想 知道 是 哪些 样式 规则 创建 了 图 中 <canvas> 上 下 方 的 蓝 色 工具 栏 ， 那 么 最 好 
是 浏览 一 下 完整 的 代码 。 如 果 你 只 想 在 自己 的 浏览 器 中 试验 一 下 这 个 画图 程序 ， 可 以 打 
开 我 们 试验 站 点 ( http://prosetech.com/html5 ) 上 的 Paint.html。 




















TREE 村 | 图 8-11: 要 在 这 个 程序 中 画图 ， 先 选择 一 种 颜色 ， 
一 2 再 选择 笔画 粗细 ， 然 后 就 晃动 鼠标 吧 
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8.2.1 准备 工作 


首先 ， 当 页 面 加 载 后 ， 脚 本 代码 会 取得 ccanvas> 对 象 ， 为 它 添加 一 些 处 理 函 数 ， 以 便 处 理 不 
同 鼠 标 操作 导致 的 JavaScript 事 件 : onMouseDown、onMouseUp、onMouse0ut 和 onMouseMove。( 稍 后 你 
就 会 看 到 ， 我 们 正 是 通过 这 些 事件 来 控制 绘图 过 程 的 。) 与 此 同时 ， 代 码 也 把 <canvas> 保 存在 了 
一 个 全 局 变量 中 ( 变量 名 为 canvas )， 把 绘图 上 下 文保 存在 了 男 一 个 全 局 变量 中 ( 变量 名 为 
context )。 任 何 位 置 的 代码 都 能 轻易 访问 到 全 局 变量 : 


var canvas; 
var context; 








window.onload = function() { 
// 取 得 <canvas> 和 绘图 上 下 文 
canvas = document.getElementById("drawingCanvas"); 
context = canvas.getContext("2d"); 


// 添 加 用 于 实现 绘图 操作 的 事件 处 理 程 序 
canvas.onmousedown = startDrawing; 
canvas.onmouseup = stopDrawing; 
canvas.onmouseout = stopDrawing; 
canvas.onmousemove = draw; 
}; 
要 想 开始 画图 , 首先 要 从 窗口 顶部 的 两 个 工具 栏 中 选择 笔画 颜色 和 笔画 粗细 。 这 两 个 工具 栏 
就 是 两 个 cdiv> 元 素 ， 通 过 样式 给 它们 添加 了 熟悉 的 铁 青 色 背 景 ， 还 有 边框 。 工 具 栏 中 包含 一 些 
可 以 点 击 的 图 像 (<img> 元 素 )。 例 如 ， 以 下 就 是 供用 户 选 择 3 种 颜色 的 工具 栏 的 标记 : 


<div class="Toolbar"> 
- Pen Color -<br> 
<img id="redPen" src="pen red.gif" alt="Red Pen" 
onclick="changeColor('rgb(212,21,29)', this)"> 
<img id="greenPen" src="pen green.gif" alt="Green Pen" 
onclick="changeColor('rgb(131,190,61)', this)"> 
<img id="bluePen" src="pen blue.gif" alt="Blue Pen" 
onclick="changeColor('rgb(0,86,166)', this)"> 

</div> 


以 上 标记 中 的 重点 在 于 每 个 cimg> 元 素 的 onclick 属 性 。 访 客 单 击 每 幅 图 像 时 ， 都 会 调用 与 
<img> 元 素 绑 定 的 changeColor() 函 数 。 这 个 函数 接收 两 个 参数 : 与 图 标 颜 色 匹 配 的 新 颜色 和 对 被 
单 击 的 <img> 元 素 本 身 的 引用 。changeColor() 函 数 的 代码 如 下 : 


// 记 录 此 前 为 选择 颜色 而 被 单 击 过 的 <img> 元 素 
var previousColorElement; 



































function changeColor(color, imgElement) { 
// 重 新 设置 当前 绘图 要 使 用 的 颜色 
context.strokeStyle = color; 





// 为 刚 被 单 击 的 <img> 元 素 应 用 一 个 新 样式 
imgElement.className = "Selected"; 
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// 恢 复 上 一 次 被 单 击 的 <img> 元 素 的 样式 
if (previousColorElement != null) previousColorElement.className = 
previousColorElement = imgElement; 


} 

这 个 changeColor() 函数 负 责 完 成 两 项 任务 : 首先 ,将 绘图 上 下 文 的 strokeStyle 属 性 设置 为 
新 的 颜色 值 。 这 只 需 一 行 代码 就 够 了 。 其 次 ， 2 II 即 添加 实心 边框 ， 
以 便 明 确 显 示 当 前 绘图 所 使 用 的 颜色 。 这 里 还 需要 一 点 工作 ， 因 为 要 记录 上 一 次 选择 的 颜色 ， 以 
便 将 其 对 应 的 图 像 的 边框 去 掉 。 

接 下 来 的 changeThickness() 函 数 几 乎 与 changeColor() 完 全 相同 ， 唯 一 的 区 别 就 是 它 要 修改 
绘图 上 下 文 的 lineWidth 属 性 ， 以 保证 绘图 以 适当 粗细 的 笔画 进行 。 


// 记 录 此 前 为 选择 粗细 而 被 单 击 过 的 <img> 元 素 
var previousThicknessElement; 


nn 。 
3 


























function changeThickness(thickness, imgElement) { 
// 重 新 设置 当前 绘图 要 使 用 的 粗细 
context.lineWidth = thickness; 








// 为 刚 被 单 击 的 <img> 元 素 应 用 一 个 新 样式 


imgElement.className = "Selected"; 


// 恢 复 上 一 次 被 单 击 的 <img> 元 素 的 样式 
if (previousThicknessElement != null) { 
previousThicknessElement.className = 


} 


previousThicknessElement = imgElement; 


} 
没 错 ， 这 些 代 码 没 有 执行 任何 实际 的 绘图 操作 ， 我 们 的 例子 还 没有 做 完 。 接 下 来 的 ( 最 后 ) 
一 步 ， 就 是 添加 实际 给 会 图 的 代码 。 


8.2.2 ”在 画布 上 绘图 


绘图 操作 从 用 户 在 画布 上 按 下 鼠标 时 开始 。 我 们 这 个 画图 程序 使 用 了 一 个 名 为 isDrawing 的 
全 局 变量 ， 记 录 绘 图 什么 时 候 开始 ， 以 方便 其 他 代码 知悉 是 否 该 通过 绘图 上 下 文 进行 绘制 。 

在 前 面 的 代码 中 , 我 们 看 到 onMouseDown 事 件 是 与 startDrawing() 函 数 绑 定 的 。 这 个 函数 首先 
将 isDrawing 变 量 设置 为 true， 然 后 创建 新 路 径 ， 找 到 起 点 位 置 ， 并 作 好 绘制 准备 。 


var isDrawing = false; 


nn 
了 












































function startDrawing(e) { 
// 开 始 绘 图 了 
isDrawing = true; 





// 创 建新 路 径 (使 用 当前 设置 好 的 描 边 颜色 和 线条 粗细 ) 
context.beginpath(); 


// 把 画笔 放 到 鼠标 当前 所 在 位 置 
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context.moveTo(e.pageX - canvas.offsetLeft，e.pageY - canvas.offsetTop); 











为 了 让 画图 程序 正确 运行 ， 应 该 在 鼠标 当前 所 在 位 置 开 始 绘制 。 鼠 标 当前 所 在 位 置 ， 就 是 用 
户 在 画布 上 单 击 鼠标 的 位 置 。 不 过 ， 取 得 这 个 位 置 的 坐标 还 要 费 点 小 周折 。 

onMouseDown 事 件 本 身 提供 了 坐标 ( 如 代码 所 示 ， 通 过 事件 对 象 的 pageX 和 pageY 属 性 )， 但 这 
两 个 坐标 值 是 相对 于 整个 页 面 的 。 而 我 们 需要 的 是 相对 画布 左上 角 的 坐标 值 , 所 以 需要 再 减 去 浏 
览 需 左上 角 到 画布 左上 角 的 距离 。 

实际 的 绘图 操作 要 等 到 用 户 移 动 鼠 标的 时 候 再 开始 。 用 户 每 次 移动 鼠标 , 哪怕 只 移动 了 一 个 
像素 ， 都 会 触发 onMouseMove 事 件 并 执行 draw() 函 数 。 此 时 ， 如 果 isDrawing 的 值 为 true，draw() 
函数 就 会 计算 当前 画布 坐标 ( 即 鼠 标 最 新 位 置 的 坐标 )， 然 后 调用 lineTo() 在 画布 上 绘制 极 小 的 
一 段 线段 ， 最 后 再 调用 stroke() 把 线条 实际 地 绘制 出 来 : 

function draw(e) { 

if (isDrawing == true) { 
// 找 到 和 所 标的 新 位 置 


var x = e.pageX - canvas.offsetLeft; 
var y = e.pageY - canvas.offsetTop; 





















































// 画 一 条 到 新 位 置 的 线 
context.lineTo(x, y); 
context. stroke(); 


} 
} 


用 户 继续 移动 鼠标 ，draw() 晒 数 就 会 再 次 被 调用 ， 再 绘制 一 小 段 线段 。 这 条 线段 非常 短 ， 疏 
怕 只 有 一 两 个 像素 ， 如 果 用 户 乱 涂 的 话 这 看 着 都 不 像 一 条 直线 。 

最 后 ， 用 户 释放 鼠标 时 ， 或 者 把 光标 移动 到 画布 外 面 时 ， 就 会 触发 onMouseUp 或 onMouseOut 
事件 。 这 两 个 事件 都 会 触发 同一 个 函数 : stopDrawing()， 这 个 函数 告诉 程序 停止 绘图 : 

function stopDrawing() { 


isDrawing = false; 


由 

关于 这 个 简单 的 画图 程序 的 代码 , 到 这 里 已 经 差不多 介绍 完了 。 所 剩 的 就 是 画布 下 方 的 那 两 
个 按钮 , 一 个 按钮 用 于 保存 当前 作品 , 男 一 个 按钮 用 于 清除 画布 。 单 击 清除 按钮 ，clearCanvas() 
函数 会 清空 整个 画布 ， 使 用 的 是 绘图 上 下 文 的 clearRect() 方 法 : 


function clearCanvas() { 
context.clearRect(0, 0, canvas.width, canvas.height); 





















































而 保存 操作 更 有 意思 ， 因 此 下 一 节 我 们 就 讨论 如 何 实现 保存 为 图 像 的 操作 。 
8.2.3 将 画布 保存 为 图 像 


说 到 把 画布 保存 为 图 像 的 方法 , 那 可 是 太 多 了 。 选择 什么 方法 ,首先 取决 于 你 怎么 取得 相应 
的 数据 。<canvas> 元 素 提供 了 三 个 基本 的 选项 。 
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口 使 用 数据 URL。 把 画布 转换 为 一 幅 图 像 文件 ， 然 后 将 图 像 数据 转换 为 字符 序列 并 编码 为 
URL 形 式 。 这 种 方式 生成 的 数据 URL 非 常 适合 传输 图 像 ( 例如 , 可 以 将 数据 URL 作 为 <img> 
元 素 的 src 属 性 值 , 或 者 也 可 以 将 其 发 送 到 Web 服 务 器 ), 我 们 的 画图 程序 就 使 用 这 种 方法 。 

口 使 用 getImageData() 方 法 。 取 得 原始 的 像素 数据 ， 然 后 可 以 继续 根据 需要 操作 这 些 数据 。 

关于 getImageData() 方 法 ， 我 们 会 在 9.5.3 节 介绍 。 

口 保存 一 组 “步骤 ”。 比 如 ， 可 以 把 在 画布 上 绘制 的 每 一 条 线 都 保存 到 一 个 数组 中 。 然 后 ， 
保存 这 个 数组 ， 以 便 将 来 根据 该 数组 重新 绘制 图 像 。 这 个 方法 不 占 空间 ， 而 且 更 具 灵 活性 ， 
方便 以 后 编辑 图 像 。 但 是 ,前 提 是 你 必须 记录 每 一 步 操 作 ， 而 相关 的 技术 将 在 9.3.1 节 介绍 。 

如 果 这 些 方 法 已 经 让 你 感觉 头 尝 目眩 了 , 请 再 坚持 一 小 会 儿 ， 我 们 还 没 结 束 。 确定 了 要 保存 
什么 之 后 ， 接 下 来 还 要 决定 保存 到 哪儿 。 而 这 又 有 三 种 选择 。 

口 保存 为 图 像 文件 。 例如, 可 以 让 用 户 把 画布 以 PNG 或 JPEG 图 像 格 式 保 存在 自己 的 硬盘 上 。 

这 也 是 我 们 选择 的 方式 。 

口 保存 在 本 地 存储 系统 中 。 相 关内 容 将 在 第 10 章 介绍 。 

口 保存 在 Web 服 务 器 上 .。 在 把 数据 发 送 到 Web 服 务 器 后 , 服务 器 端 程序 可 以 把 它 保存 到 文件 
里 ， 也 可 以 保存 到 数据 库 中 。 这 样 ， 当 用 户 下 次 访问 相同 页 面 时 ， 还 可 以 读 取 到 以 前 的 
绘图 记录 。 

为 了 给 画图 程序 增加 保存 功能 , 我 们 使 用 数据 URL 的 方案 。 要 取得 当前 数据 的 URL， 必 须 通 

过 画布 对 象 调用 toDataURL() 方 法 : 

var url = canvas.toDataURL(); 
在 调用 toDataURL() 方 法 时 如 果 不 提供 参数 ， 得 到 的 将 是 一 个 PNG 图 片 。 如 果 你 想 要 其 他 格 

式 的 图 片 ， 可 以 传人 相应 的 MIME 类 型 : 

var url = canvas.toDataURL("image/jpeg"); 
不 过 ,假如 浏览 需 不 支持 你 想 要 的 格式 ， 它 仍然 会 发 给 你 一 个 PNG 文 件 , 一 个 转换 后 的 长 长 

的 字符 串 。 

数据 URL 到 底 是 什么 ”从 技术 角度 讲 ， 数 据 URL 就 是 一 个 以 data:image/png;base64 开 头 的 
base-64 编 码 的 字符 串 。 这 个 字符 串 很 长 ,不 过 不 要 紧 ， 因 为 数据 URL 是 要 给 计算 机 程序 ( 如 浏览 

避 ) 看 的 。 以 下 就 是 当前 画布 图 片 的 数据 URL : 


data:image/png;base64, iVBORwOKGgoAAAANSUhEUgAAAfOAAAEsCAYAAAA1uOHIAAAAAXNSR 
OIArs4c6QAAAARnQOU1BAACxjwv8YQUAACqRSURBVHhe7Z1bkB1iHecdn5uxFFzA2FWOnsEEGiiew 
nzZgKsrWLrZXMRU9JgZQKhoSHVK. . .gAAEIOAACEIBAiAT+HxAYpeqDfKieAAAAAElFTkSuQmCC 


为 了 节省 版 面 ， 这 里 代码 的 中 间 省 略 了 大 量 字 符 ( 注意 省 略 号 )。 如 果 一 点 不 落地 都 放 在 这 
儿 ， 疏 介 得 占用 本 书 这 样 的 5 页 篇 幅 。 








































































































注意 ”Base-64 编 码 是 一 种 将 图 像 数 据 转换 成 长 字符 串 的 编码 方法 ， 长 字符 事由 字符 、 数 字 及 少 
量 特殊 字符 组 成 。 由 于 编码 后 的 字符 串 不 包含 标点 符号 和 所 有 专用 扩展 字符 ， 所 以 结果 
可 以 安全 地 用 在 网 页 中 (例如 ， 作 为 隐藏 输入 字段 的 value 或 <img> 元 素 的 STC 属 性 值 )。 
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总 之 , 很 容易 把 画布 转换 为 数据 URL 形 式 的 


图 像 数 据 。 但 有 了 数据 URL 之 后 ， 又 能 用 它 来 做 





什么 呢 ? 一 种 处 理 方式 是 将 它 发 送 给 Web 服 务 器 长 期 保存 ,这 里 有 一 篇 文章 ,讲解 了 只 用 少量 PHP 
脚本 即 可 实现 上 述 目 的 的 方法 : http://tinyurl.com/5uud90b。 
如 果 你 只 想 把 数据 保存 在 客户 端 , 那 方法 并 不 太 多 。 有 些 浏览 器 支持 直接 访问 数据 URL，, 也 


就 是 可 以 使 用 下 面 这 样 的 代码 直接 打开 图 像 : 


window.location = canvas.toDataURL(); 





而 更 可 靠 的 方法 则 是 把 数据 URL 交 给 一 个 cimg> 元 素 。 下面 就 是 我 们 画图 程序 的 处 理 代码 ( 见 


图 8-12 ): 


function saveCanvas() { 
// 找 到 <img> 元 素 


var imageCopy = document.getElementById("savedImageCopy"); 


// 在 图 像 中 显示 画布 数据 
imageCopy.src = canvas.toDataURL(); 





// 显 示 包 含 <img>》 元 素 的 《<div>， 以 便 把 图 像 显 示 出 来 





var imageContainer = document.getElementById(" 


imageContainer.style.display = "block"; 


savedCopyContainer"); 








ee 
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图 8-12: 在 此 ， 我 们 使 用 数据 URL 把 画布 中 的 信 
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息 传递 给 wwe 我 们 把 <img> 元 素 的 尺 十 
设置 得 比较 小 ， 以 区 别 于 画布 。 如 果 想 把 图 像 
保存 为 ,png 文件， 只 要 在 图 像 上 单 击 右键 ， 选 择 
“图 片 另存 为 ” 即 可 一 一 与 保存 网 页 中 的 其 他 图 
像 一 样 
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以 上 代码 并 没有 真 的 “保存 ”图 像 数据 ， 因 为 图 像 不 会 长 期 保存 〈 比如 保存 为 一 个 文件 )。 
然而 ， 对 于 显示 在 网 页 中 的 图 像 ， 只 要 简单 操作 两 下 就 可 以 保存 下 来 了 。 这 个 大 家 都 知道 ,在 图 
像 上 单 击 右键 , 选择“ 图片 另存 为 ”就 好 了 。 虽 然 这 样 不 如 下 载 文件 或 弹出 “保存 ”对 话 框 方便 ， 
但 却 是 在 所 有 浏览 器 中 都 能 可 靠 使 用 的 唯一 一 个 客户 端 方案 。 








注意 Firefox 内 置 支 持 把 画布 内 容 保存 为 文件 。 只 要 在 <canvas> 元 素 上 ( 而 不 是 下 面 的 小 图 像 上 ) 
单 击 右键 ， 然 后 选择 “图 片 另 存 为 ”"。 而 Chrome、IE 等 浏览 器 则 没有 提供 此 功能 。 


注 


吕 


如 果 你 是 在 本 地 计算 机 硬盘 上 运行 自己 的 试验 页 面 ， 那 么 数据 URL 功 能 会 失效 
《canvas> 的 其 他 几 项 功能 也 是 如 此 。 为 了 避免 出 现 这 个 问题 ， 需 要 把 试验 页 面 上 传 到 Web 
服务 器 后 再 打开 。 





基于 Canvas 的 绘图 程序 
当 大 家 开始 学 习 <canvas> 时 ,首先 想到 的 就 是 用 它 来 开发 绘图 程序 。 因 此 , 在 谷歌 里 一 搜 ， 
很 容易 就 能 找到 一 些 这 样 的 绘图 程序 ， 有 的 还 支持 很 多 高 级 功能 。 以 下 是 两 个 合子 。 
口 iPaint ( http://tinyurl.com/js-ipaint )。 这 个 简单 的 程序 看 起 来 就 像 Web 版 的 微软 画图 。 但 
是 ， 它 至 少 添 加 了 一 个 新 功能 一 一 可 以 选择 并 维护 所 绘图 像 中 的 对 象 。 
口 Sketchpad ( http://mugtug.com/sketchpad )。 这 个 装扮 得 美 轮 美 奥 的 绘图 程序 支持 了 一 些 
先进 的 图 和 案 功能 ， 比 如 图 形 管理 、 选 取 框 、 纹 理 ， 其 至 是 动画 图 。 





8.3 浏览 器 对 Canvas 的 支持 情况 


关于 Canvas， 我 们 已 经 介绍 了 很 多 东西 了 。 现 在 该 面 对 现实 ， 回 答 那 个 关系 到 每 个 HTML5 
新 功能 的 问题 了 一 一 什么 时 候 可 以 放心 使 用 ? 

我 们 很 幸运 ，Canvas 是 目前 得 到 较 好 支持 的 HTML5 功 能 。 主 流 浏览 器 的 所 有 最 新 版 本 都 支 
持 它 。 当 然 ， 浏 览 器 版 本 越 高 ， 支 持 得 就 越 好 。 而 且 ， 新 版 本 浏览 右 还 进一步 提高 了 绘图 速度 ， 
修复 了 一 些 偶 尔 出 现 的 小 问题 。 

除了 IE9 之 前 的 版 本 之 外 , 很 少 有 人 会 使 用 不 支持 <canvas> 的 旧 浏 览 需 。 而 这 正 是 今天 Canvas 
用 户 最 关心 的 问题 : 怎样 才能 既 在 网 页 中 使 用 ccanvas>， 又 能 保证 不 把 IE7 和 IE8 这 两 款 浏 览 器 排 
除 在 外 ? 

与 许多 其 他 HTML5 功 能 一 样 ， 为 了 保证 兼容 性 ， 我 们 有 两 个 选择 。 第 一 个 选择 是 检测 浏览 
器 是 否 支 持 新 功能 ， 不 支持 则 提供 后 备 内 容 。 第 二 个 选择 是 利用 第 三 方 工具 来 模仿 HTML5 的 
<canvas>， 做 到 同一 个 页 面 也 能 在 旧版 本 浏览 器 中 运行 。 具体 到 <canvas>， 第 二 个 选择 是 首选 ， 
稍 后 我 们 会 介绍 原因 。 
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8.3.1 用 ExplorerCanvas 兼 容 Canvas 


为 了 让 过 时 的 老 版 本 下 支持 类 似 Canvas 的 功能 ， 出 现 了 很 多 靠 谱 的 方案 。 较 早 的 一 个 是 
ExplorerCanvas 库 ( 即 excanvas )， 由 谷歌 工程 师 、JavaScript 天 才 Erik Arvidsson 开 发 。 这 个 库 能 在 
IE7 和 IE8 中 模仿 HTML5 Canvas ， 完 全 使 用 JavaScript， 还 有 目前 已 经 不 太 流 行 的 VML ( Vector 
Markup Language， 矢 量 标记 语言 ) 技术 。 























注意 VML 是 一 种 针对 在 HTML 文 档 中 使 用 标记 创建 线 框图 及 插图 的 标记 语言 规范 。 目 前 ， 已 
经 被 与 之 相似 但 支持 情况 更 好 的 标准 SVG ( Scalable Vector Graphics， 可 伸缩 矢量 图 ) 所 
取代 , SVG 正 开始 得 到 浏览 器 的 广泛 支持 。VML 在 微软 的 菜 些 产品 ( 比如 Microsoft Office 
和 IE ) 中 仍然 可 以 使 用 。 因 此 ， 虽 然 其 他 浏览 器 支持 不 好 ， 但 在 IE 浏览 器 中 用 它 来 模仿 
Canvas 仍 然 是 最 好 的 方案 。 


ExplorerCanvas 的 下 载 地 址 是 http://code.google.com/p/explorercanvas。 下 载 后 ， 把 excanvas.js 
文件 复制 到 网 页 所 在 目录 ， 然 后 在 网 页 中 引用 它 就 可 以 了 : 
<head> 
<title>...</title> 
<!--[if lt IE 9]> 
<SCITipt src="excanvas.js"></script> 
<![endif]--> 
chead> 
这 里 使 用 了 正 的 条 件 注释 。 只 有 早 于 IE9 的 版 本 才 会 使 用 它 , IE9 及 非 耻 浏览 器 会 忽略 这 个 脚本 。 
此 后 ， 再 使 用 <canvas> 基 本 上 就 没有 后 顾 之 忧 了 。 实 际 上 ， 引 入 这 个 脚本 之 后 ， 我 们 前 面 开 
发 的 画图 程序 〈( 见 8.2 节 ) 在 旧版 本 的 下 中 也 可 以 运行 。 








注意 ”如果 你 想 在 Canvas 上 绘制 文本 (9.1.3 节 介绍 )， 那 还 需要 第 二 个 JavaScript 库 的 支持 ， 那 就 
是 Canvas-text， 它 与 ExplorerCanvas 可 以 协同 工作 。Canvas-text 的 下 载 地 址 为 http://code. 


google.com/p/canvas-text/。 


8.3.2 ”用 FlashCanvas 兼 容 Canvas 


当然 ，ExplorerCanvas 也 不 是 完美 无 缺 的 。 如 果 你 想 使 用 高 级 的 Canvas 绘 图 功能 ， 可 能 就 会 
引发 一 些 错误 。ExplorerCanvas 不 支持 一 些 主要 功能 (应 该 说 ， 在 编写 本 书 时 还 不 支持 的 功能 
包括 放射 渐变 、 阴 影 、 剪 切 区域 、 原 始 像素 处 理 和 数据 URL。 虽 然 有 可 能 ExplorerCanvas 将 来 会 
更 新 并 加 上 这 些 功能 ， 但 这 种 可 能 性 不 大 ExplorerCanvas 当 前 的 版 本 已 经 是 几 年 前 的 了 ， 而 
且 代 码 也 有 段 时 间 没 更 新 了 。 
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如 果 你 的 要 求 很 高 ( 比如 ， 也许 你 想 创建 复杂 的 动画 或 横向 卷轴 游戏 )，ExplorerCanvas 的 性 
能 慌 怕 无 法 满足 需要 。 在 这 种 情况 下 ， 建 议 你 考虑 其 他 基于 高 性 能 浏览 器 插件 〈 如 Silverlight 或 
Flash ) 的 JavaScript 库 。GitHub 上 有 一 个 页 面 ， 地 址 是 http:/Wtinyurl.compolyfills ， 其 中 列 出 了 几乎 
所 有 可 供 选 择 的 JavaScript 补 丁 库 。 其 中 哪个 最 好 ? 现在 就 可 以 推荐 一 个 免费 的 库 : FlashCanvas ， 
下 载 地 址 是 http://flashcanvas.net/purchase'。 与 ExplorerCanvas 类 似 ， 要 使 用 FlashCanvas ， 只 需 一 
行 脚本 。 但 与 ExplorerCanvas 不 同 的 是 ，FlashCanvas 依 赖 Flash 搬 件 ， 而 不 使 用 VML。 

FlashCanvas 还 有 一 个 更 完善 的 专业 版 FlashCanvas Pro。 它 添加 了 一 些 额外 功能 的 支持 ， 比 如 
全 部 的 合成 操作 ( 参见 8.1.6 节 ) 和 阴影 (参见 9.2.1 节 )。 

FlashCanvas Pro 对 非 商 业 使 用 是 免费 的 (可 以 在 http://flashcanvas.net/download 下 载 )。 如果 是 
营利 性 质 的 机 构 或 个 人 ， 需 要 花 一 笔 小 钱 〈 目前 是 31 美 元 )， 购 买 链接 为 http://flashcanvas. 
net/purchase。 至 于 ExplorerCanvas 、FlashCanvas 与 FlashCanvas Pro 对 Canvas 的 支持 情况 对 比 ， 可 
以 参考 这 个 页 面 : http://flashcanvas. net/docs/canvas-api。 

和 ExplorerCanvas 一 样 ，FlashCanvas 项 目 最 近 也 不 太 活 跃 了 。 但 是 ， 以 它 目 前 的 状态 ， 仍 然 
是 旧版 浏览 器 兼容 ccanvas> 的 可 靠 选 择 。 如 果 想 要 做 一 个 宏大 的 基于 <canvas> 的 网 站 ， 比 如 实时 
游戏 ， 那 就 需要 测试 FlashCanvas， 看 它 是 否 支 持 所 需 的 功能 。 



































注意 使 用 FlashCanvas 开 发 基于 Canvas 的 应 用 ， 能 够 在 如 今 几乎 所 有 的 浏览 器 中 得 到 最 好 的 支 
持 。 不 仅 能 通过 Flash 获 得 版 本 老 一 些 的 IE 的 支持 ,而 且 在 不 支持 Flash 的 Pad、iPhone 等 
移动 设备 上 ， 同 样 能 通过 HTML5 获 得 原生 支持 。 


8.3.3 Canvas 后 备 及 功能 检测 


扩展 网 页 对 Canvas 支 持 的 最 流行 方案 是 使 用 ExplorerCanvas 和 FlashCanvas。 但 它们 并 不 是 唯 
一 的 方案 。 

与 上 一 章 介 绍 的 caudio> 和 <video> 元 素 一 样 ，<canvas> 元 素 本 身 也 支持 后 备 内 容 。 比 如 ， 下 
列 代码 表示 可 以 在 浏览 器 支持 的 情况 下 使 用 ccanvas>， 而 在 不 支持 的 情况 下 显示 图 像 : 


<canvas id="logoCreator" width="500" height="300"> 
<p>The canvas isn't supported on your computer, so you can't use our 
dynamic logo creator.</p> 
<img src="logo.png" alt="Standard Company Logo"> 

</canvas> 


这 种 方案 当然 是 聊 胜 于 无 。 多 数 时 候 ， 我 们 会 利用 <canvas> 绘 制 一 些 动 态 图 像 ， 或 者 创建 一 
些 基 于 图 形 的 交互 应 用 ,在 这 种 情况 下 只 显示 一 幅 静 态 图 像 ， 显 然 于 事 无 补 。 为 此 ,更 好 的 办 法 
是 在 <canvas> 元 素 中 能 入 Flash 应 用 。 这 个 办 法 对 已 经 有 了 Flash 版 ， 又 想 迁 移 到 <canvas> 以 适应 未 
来 发 展 的 应 用 非常 合适 。 这样, 既 有 满足 老 版 本 IE 浏 览 器 的 Flash 应 用 , 又 可 以 让 其 他 人 安心 使 用 












































注 1: 原 书 给 出 的 下 载 地 址 是 http://code. google. Com/p/flashcanvas， 但 该 网 站 可 能 已 经 不 存在 。( 编者 注 ) 
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无 插件 的 ccanvas> 版 。 

如 果 你 使 用 Modernizr (参见 1.6.7 节 )， 还 可 以 在 JavaScript 代 码 中 检测 浏览 器 是 否 支 持 
<canvas>。 为 此 ， 只 要 检测 Modernizr.canvas 属 性 即 可 。 而 要 检测 浏览 器 是 否 文 持 文本 绘制 功能 
(后 来 才 添加 的 Canvas 绘 图 功能 )， 可 以 检测 Modernizr.canvastext 属 性 。 如 果 你 不 想 检 测 浏览 右 
对 <canvas> 的 支持 情况 ， 可 以 选择 任何 自己 襄 欢 的 JavaScript 补 丁 库 。 















































无 障碍 的 Canvas 

是 否 可 以 让 残疾 人 无 障碍 地 访问 Canavs? 

语义 元 素 是 HTML5 的 重头 戏 ， i 即 在 设计 页 面 时 ， 
就 要 考虑 为 残疾 人 使 用 的 辅助 上 网 工具 提供 信息 ， 以 方便 残疾 人 使 用 你 的 网 站 。 一 路 下 来 ， 突 
然 冒 出 了 另 一 个 HTML5 中 头等 重要 的 元 素 ， 但 它 却 没 有 语义 ， 也 不 支持 无 障碍 访问 。 

HIMLS 的 制定 者 正在 积极 考虑 弥补 这 个 问题 。 然 而 ， 什 么 方案 最 好 ， 目 前 还 没有 定论 。 
有 人 建议 为 辅助 上 网 工具 单独 生成 一 个 文档 ,该 文档 完全 镜像 Canvas 的 内 容 。 可 问题 在 于 , 这 
个 镜像 文档 终归 还 要 让 网 页 作者 生成 ,这 个 “影子 ”文档 能 否 与 可 见 内 容 同步 ,就 会 因 作者 而 
异 。 如 果 创 建 镜像 文档 很 麻烦 ,那么 想 偷懒 的 人 ,或 者 手头 活 太 多 的 人 可 能 就 会 对 其 教 衍 了 事 、 
0 责任 。 

一 种 意见 是 扩展 图 像 地 图 ( 已 有 的 一 种 HTML 功能， 可 以 把 一 张 图 像 切 分 成 多 块 可 单 击 

的 以 便 将 其 作为 独立 的 一 层 放 在 Canvas 上 面 。 由 于 图 像 地 图 本 质 上 就 是 一 组 链接 ， 所 
以 可 以 在 其 中 保存 重要 信息 ， 供 辅助 上 网 工具 读 取 并 传达 给 残疾 用 户 。 

目前 来 看 ， 对 这 两 种 意见 我 们 只 能 始 妄 听 之 ， 因 为 都 还 停留 在 讨论 阶段 。 在 此 期 间 ， 你 尽 
管 使 用 Canvas 去 实现 各 种 图 形 开 发 任务 ， 比 如 大 型 电子 游戏 ( 电子 游戏 实际 上 并 不 能 做 到 无 障 
碍 )， 或 者 数据 可 视 化 (只 要 相关 数据 有 文本 格式 ， 就 可 以 做 到 无 障碍 )。 但 是 ， 不 能 把 Canvas 
当做 一 个 通用 万 能 的 页 面 设计 元 素 。 换 向 话说 ， 如 果 你 只 想 用 它 来 创建 一 个 新 奇 的 标题 或 者 网 
站 导致 菜单 ， 我 劝 你 还 是 省 省 吧 ， 最 好 现在 就 打消 这 个 念头 。 
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anvas 功 能 十 分 庞大 ， 而 且 还 在 逐步 发 展 。 上 一 章 ， 我 们 学 习 了 如 何 绘制 直线 ， 乃 至 使 
用 为 数 不 多 的 JavaScript 代 码 开发 一 个 还 像 那么 回 事 儿 的 画图 程序 。 可 是 ，Canvas 本 身 
的 功能 还 远 不 止 这 些 。 使 用 它 不 仅 能 显示 动态 图 片 、 开 发 画图 工具 ,还 可 以 播放 动画 、 在 像素 级 
别 上 处 理 图 像 ， 甚 至 基于 它 创 建交 互 游戏 。 这 一 章 ， 我 们 介绍 上 述 所 有 功能 的 实际 应 用 。 
首先 ,我 们 从 绘图 上 下 文 支持 的 绘制 图 像 和 文本 的 不 同方 法 讲 起 ,然后 讨论 为 图 像 添加 阴影 、 
使 用 图 案 和 渐变 填充 。 最 后 ， 学 习 为 Canvas 添 加 交互 功能 ， 以 及 通过 它 实现 动画 效果 。 最 关键 的 
是 ， 实 现 这 些 功 能 只 要 编写 基本 的 JavaScript 代 码 即 可 ， 当 然 还 要 有 你 的 创意 。 














注意 本 章 前 半 部 分 重点 分 析 小 段 的 绘图 代码 。 你 可 以 把 这 些 代 码 直 接 放 到 自己 的 网 页 中 ,但 
别 忘 了 在 页 面 中 添加 相应 的 <canvas> 元 素 ， 以 创建 绘图 上 下 文 (参见 8.1 节 )。 本章 后 半 部 
分 讲解 更 复杂 的 任务 ， 书 中 会 给 出 相关 示例 的 大 部 分 (或 全 部 ) 绘图 代码 ， 但 不 会 给 出 
每 个 页 面 的 标记 代码 。 如 果 你 想 自己 动手 试验 这 些 例 子 ， 请 访问 本 书 试验 站 点 
http://prosetech.com/htmlS 。 


9.1 高 级 Canvas 绘图 


使 用 Canvas 可 以 绘制 你 能 想到 的 任何 图 形 , 无 论 是 线条 、 三 角形 , 还 是 着 色 讲 究 的 人 物 素描 。 
但 绘图 任务 越 复杂 ,代码 自 然 也 越 复杂 。 很 多 时 候 , 要 得 到 精细 的 最 终结 果 ， 靠 手工 编写 每 一 行 
代码 是 不 现实 的 。 

好 在 我 们 有 的 选择 。 绘 图 上 下 文 不 只 是 能 绘制 直线 和 曲线 ， 它 还 支持 各 种 方法 ， 让 我 们 能 
接 绘 制 已 有 的 图 片 、 文 本 、 图 案 ， 甚 至 视频 帧 。 接 下 来 的 几 节 就 介绍 如 何 使 用 这 些 方法 ， 从 而 在 
画布 中 生成 更 丰富 的 内 容 。 


9.1.1 绘制 图 像 


大 家 都 见 过 使 用 卫星 图 片 构建 的 网 页 地 图 吧 ， 其 中 的 地 图 切片 都 是 下 载 后 又 拼合 到 一 起 的 。 
这 个 典型 的 例子 说 明 ， 我 们 可 以 利用 已 有 图 片 ， 将 它们 组 织 成 最 终 作 品 。 
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绘图 上 下 文 提 供 了 drawImage() 方 法 ， 用 于 在 画布 上 绘制 图 片 。 使 用 这 个 方法 很 简单 ， 调 用 








它 的 时 候 传人 相应 的 图 片 对 象 及 起 点 坐标 即 可 : 


context.drawImage(img, 10, 10); 


虽然 , 在 调用 drawImage() 之 前 , 需要 准备 好 图 片 对 象 。HTML5 为 此 提供 了 三 个 方案 。 首先， 





可 以 使 用 createImageData() 方 法 一 个 像素 一 个 像素 地 创建 图 像 。 这 种 方法 很 麻烦 ， 也 没有 效率 
(但 9.5.3 节 仍然 会 介绍 像素 级 操作 )。 




















其 次 ,是 使 用 网 页 中 已 有 的 <img> 元 素 。 比 如 ,假设 网 页 中 存在 如 下 标记 : 
<img id="arrow left" src="arrow left.png"> 
那么 ， 使 用 以 下 代码 就 可 以 把 该 图 片 复制 到 画布 上 : 


var img = document.getElementById("arrow left"); 
context.drawImage(img, 10, 10); 


第 三 种 方案 是 在 代码 中 创建 一 个 图 片 对 象 , 然后 把 一 个 外 部 图 片 加 载 进 来 。 但 这 个 方案 有 一 








个 缺点 ， 即 必须 先 等 待 图 片 加 载 完毕 ， 然 后 才能 把 图 片 对 象 传递 给 drawImage() 方 法 使 用 。 为 此 ， 
需要 等 待 图 片 对 象 的 onLoad 事 件 发 生 ， 然 后 再 处 理 图 片 。 











为 了 理解 这 个 过 程 ， 最 好 看 一 个 例子 。 假 设 我 们 有 一 张 名 为 maze.png 的 图 片 ， 你 想 把 它 显 示 

















在 画布 上 。 理 论 上 讲 ， 应 该 通过 如 下 几 步 实现 : 


// 创 建 图 片 对 象 


var img = new Image(); 


// 加 载 图 片 文件 

img.src = "maze.png"; 

// 绘 制图 片 (可 能 会 因为 图 片 尚 未 加 载 完 而 导致 失败 ) 
context.drawImage(img, 0, 0); 


以 上 代码 的 问题 是 设置 图 片 对 象 的 src 属 性 后 只 是 开始 加 载 外 部 图 片 ， 但 代码 没有 等 到 加 载 























完成 就 立即 执行 绘图 操作 。 对 此 ， 正 确 的 方式 是 像 下 面 这 样 : 





// 创 建 图 片 对 象 


var img = new Image(); 





// 添 加 0nload 事 件 处 理 程 序 

// 告 诉 浏览 器 在 图 片 加 载 完成 后 该 做 什么 

img.onload = function() { 
context.drawImage(img, 0, 0); 


入 


// 加 载 图 片 文件 
img.src = "maze.png"; 


乍 一 看 ， 这 有 点 违反 直觉 。 因 为 代码 的 顺序 与 执行 顺序 并 不 一 致 。 对 这 个 例子 而 言 ， 











context .drawImage() 实 际 上 会 后 执行 ， 也 就 是 会 在 设置 img.strc 属 性 的 代码 执行 后 才 执 行 。 











有 了 图 片 ， 就 可 以 实现 很 多 新 奇 的 功能 。 比 如 ， 可 以 用 它们 来 装饰 自己 的 线条 图 作品 ， 可 以 











直接 绘制 图 片 而 节省 手工 绘制 时 间 。 如 果 是 在 游戏 里 ,可 以 使 用 图 片 来 表示 物体 和 人 物 ， 把 它们 
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分 别 摆 放 在 画布 的 不 同位 置 上 。 而 在 画图 程序 里 使 用 图 片 代替 线段 ， 就 可 以 画 出 “纹理 化 ”的 线 
条 来 。 本 章 会 介绍 一 些 使 用 图 片 绘图 的 实用 技术 。 











我 的 图 片 变形 了 
在 绘制 图 片 时 ， 如 果 你 发 现 原来 的 图 片 不 知 为 什么 被 拉 长 了 、 压 遍 了 ,总 之 变形 了 ， 那 幕 
后 黑手 很 可 能 是 样式 表 规 则 。 
为 画布 指定 宽度 和 高 度 的 最 佳 方案 , 就 是 在 HTML 标 记 中 使 用 width 和 height 属 性 。 可 能 有 
人 觉得 像 下 面 这 样 使 用 标记 更 简洁 : 
<«canvas></canvas> 
因为 可 以 通过 样式 表 规则 来 控制 画布 的 大 小 ， 比 如 : 
canvas { 
height: 300px; 
width: 500px; 
} 
但 这 个 方案 行 不 通 ! 问题 在 于 ， CSS 的 width 和 height 属 性 与 画布 的 width 和 height 属 性 并 
不 是 一 回 事 儿 。 假 如 你 真 的 这 么 做 了 ， 那 画布 会 取得 其 默认 尺寸 (300 像 素 x150 像 素 )。 然 后 ， 
CSS 的 width 和 height 属 性 又 会 把 画布 拉 伸 或 压缩 到 它 设置 的 大 小 ,与 此 同时 , 画布 中 的 内 容 也 
会 随 之 变形 。 结 果 ， 在 通过 画布 显示 图 片 时 ， 图 片 也 会 被 压 扁 ， 这 显示 会 降低 图 片 的 吸引 力 。 
为 避免 这 个 问题 , 请 一 定 要 在 HTML 标 记 中 为 画布 指定 宽度 和 高 度 。 如 果 你 想 在 某 个 条 件 
下 改变 画布 的 大 小 ， 可 以 使 用 JavaScript 代 码 来 修改 <canvas> 元 素 的 帘 和 高 。 


9.1.2 ”裁剪 、 切 割 和 伸缩 图 片 


可 以 给 drawImage() 函数 传递 一 些 可 选 的 参数 ， 从 而 影响 在 画布 上 绘制 图 片 的 方式 。 首 先 ， 
如 果 想 改变 图 片 的 大 小 ， 可 以 添加 宽度 和 高 度 ， 例 如 : 

context.drawImage(img, 10, 10, 30, 30); 

这 就 相当 于 为 图 片 准 备 了 一 个 30 像 素 x 30 像 素 的 方 框 ， 其 左上 角 在 画布 上 的 坐标 为 (10,10)。 
假设 图 片 实际 上 是 60 像 素 x 60 像 素 , 则 执行 上 面 的 代码 会 把 图 片 的 宽度 和 高 度 都 缩小 一 半 , 最 终 
在 画布 上 呈现 的 大 小 只 有 原来 的 1/4。 

如 果 想 裁剪 掉 一 部 分 图 片 ， 可 以 再 为 drawImage() 函 数 传人 4 个 参数 ， 这 个 4 个 参数 从 图 片 对 
象 参 数 后 面 开始 。 之 所 以 传人 4 个 参数 , 正 是 为 了 定义 从 原始 图 片 的 什么 位 置 , 裁剪 多 大 的 图 片 ， 
每 个 参数 的 含义 如 下 所 示 : 

context.drawImage(img, source x, source y, 

source width, source height, x, y, width, height); 

最 后 4 个 参数 与 上 一 个 例子 中 的 相同 ， 它 们 定义 被 裁剪 后 的 图 片 在 画布 上 的 位 置 和 大 小 。 

比如 有 一 张 200 像 素 x 200 像 素 的 图 片 , 但 我 们 只 想 在 画布 上 绘制 它 的 上 半 部 分 。 为 此 ， 就 要 
创建 一 个 200 像 素 x 100 像 素 的 和 矩形 框 ， 从 原始 图 片 的 (0,0) 位 置 开始 裁剪 ,得 到 图 片 的 上 半 部 分 。 
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然后 ， 把 裁剪 后 的 结果 绘制 到 画布 上 ， 起 点 为 (75,25)。 用 代码 表示 就 是 : 
context.drawImage(img, 0, 0, 200, 100, 75, 25, 200，100); 


图 9-1 演 示 了 这 个 例子 的 结果 。 
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如 采 你 想 要 实现 的 效果 更 多 ， 比 如 先 扭 曲 和 旋转 图 片 ， 然 后 再 绘制 ， 那 drawImage() 方 法 就 
不 够 用 了 。 不 过 ， 可 以 使 用 8.1.4 节 学 习 的 变换 来 修改 绘制 所 有 内 容 的 方式 。 








绘制 视频 帧 
我 们 知道 ，drawImage() 方 法 的 第 一 个 参数 是 要 绘制 的 图 片 。 如 前 所 述 ， 这 个 图 片 可 以 是 
临时 创建 的 图 片 对 象 ， 也 可 以 是 页 面 菜 个 地 方 已 经 存在 的 <img> 元 素 。 
但 这 些 并 非 HTMIL5 为 drawImage() 定 义 的 全 部 功能 。 实 际 上 ， 除 了 绘制 图 片 ， 还 可 以 绘制 
整个 <canvas> 元 素 ( 不 是 当前 的 这 个 )。 另外， 还 可 以 绘制 目前 正在 播放 的 <video> 元 素 ， 且 无 


需 额外 的 工作 : 
var video = 
document .getElementById("videoPplayer"); 


context.drawImage(video, 0, 0， 
video.clientWidth, video.clientWidth); 
以 上 代码 运行 后 , 会 捕获 代码 运行 瞬间 正在 播放 的 视频 中 的 一 帧 画面 , 然后 把 该 画面 绘制 
到 画布 上 。 
这 就 为 实现 其 他 很 多 有 趣 的 效果 提供 了 可 能 ,。 例如 , 可 以 利用 一 个 计时 器 来 不 断 捕获 播放 
中 的 视频 ， 然 后 不 断 将 新 画面 绘制 到 画布 上 。 假 如 整个 过 程 足够 快 ， 则 复制 的 画面 在 画布 上 连 
续 播 放 ， 就 会 成 为 另 一 个 视频 播放 器 。 





236 | 第 9 章 高 级 Canvas 技术 : 交互 性 和 动画 


发 挥 一 点 想象 ， 比 如 可 以 在 绘制 画面 之 前 ， 对 其 进行 一 些 修 改 。 比 如 ， 可 以 放大 或 缩小 画 
面 ， 或 者 取得 其 中 的 像素 数据 ， 然 后 应 用 Photoshop 滤 镜 般 的 效果 。 要 了 解 这 方面 的 实际 示例 ， 
可 以 参考 这 篇 文章 : http://html5doctor.com/video-canvas-magic。 这 篇 文章 里 介绍 了 在 画布 中 播 
放 黑 自 通 面 的 实现 过 程 , 方法 就 是 从 现 有 视频 中 实时 取得 画面 截图 , 然后 把 每 个 彩色 像素 转换 
成 黑 自 像素 ， 最 后 再 绘制 到 画布 上 。 


9.1.3 ”绘制 文本 


除了 直线 和 曲线 ， 你 一 定 还 想 在 画布 上 绘制 文本 ， 但 你 肯定 不 愿意 自己 通过 绘制 线条 来 形成 
文本 。HTML5S 规 范 也 没有 认为 你 愿意 。 为 此 , 我 们 就 有 了 男 外 两 个 绘图 上 下 文 方法 支持 绘制 文本 。 

首先 ， 在 绘制 文本 之 前 要 设置 绘图 上 下 文 的 font 属 性 。 这 个 属性 的 值 是 一 个 字符 串 ， 与 设置 
CSS 的 font 属 性 时 使 用 的 “多 合 一 ”的 值 相同 。 最 简单 的 情况 ， 也 要 设置 字体 大 小 ( 像素 ) 和 字 
体 名 称 ， 比 如 : 


context.font = "20px Arial"; 

如 果 不 能 确定 用 户 的 浏览 咒 支 持 哪 种 字段 ， 可 以 多 列 出 几 种 来 : 

context.font = "20px Verdana,sans-serif"; 

此 外 ， 还 可 以 为 字体 应 用 加 粗 效果 ， 不 过 要 把 它 放 在 字符 串 的 开头 : 

context.font = "bold 20px Arial"; 

而 在 CSS3 的 支持 下 ， 其 至 还 可 以 使 用 新 颖 的 网 络 字 体 。 这 要 涉及 使 用 样式 表 来 注册 字体 ， 
相关 内 容 将 在 6.4 节 介绍 。 

设置 好 字体 后 ， 就 可 以 调用 fillText() 方 法 绘制 文本 内 容 了 。 以 下 示例 代码 将 把 文本 内 容 的 
左上 角 放 在 画布 的 (10,10) 坐 标点 处 : 


Context .textBaseline = "top"; 
context.fillstyle = "black"; 
context.fillText("I'm stuck in a canvas. Someone let me out!", 10, 10); 


可 以 把 文本 内 容 绘 制 到 任何 地 方 , 但 每 次 却 只 能 绘制 一 行 。 如果 要 绘制 多 行文 本 , 那 只 能 多 
次 调用 fillText() 方 法 。 















































提示 “如 果 要 把 一 个 完整 的 段落 拆 成 多 行文 本 ， 可 以 设计 自己 的 单词 折 行 算法 。 基 本 的 思路 就 
是 把 句子 拆 成 单词 ， 然 后 通过 绘图 上 下 文 的 measureText() 方 法 获悉 每 行 可 以 放下 多 少 个 
单词 。 这 个 工作 确实 很 烦琐 ， 不 过 可 以 参考 这 里 的 示例 代码 ， 也 许 你 能 从 中 得 到 一 些 启 
发 : http://tinyurl.com/6ec7hld。 


除了 fillText() 方 法 ， 还 有 另 一 个 绘制 文本 的 方法 ， 即 strokeText()。 这 个 方法 用 于 绘制 
文本 的 轮廓 ， 轮 廓 的 颜色 取 自 strokeStyle 属 性 ， 而 轮廓 的 宽度 取 自 linewidth 必 性。 下面 是 一 
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个 例子 : 


context.font = "bold 40px Verdana,sans-serif"; 
context.lineWidth = "1"; 

context.strokeStyle = "red"; 
context.strokeText("I'm an OUTLINE", 20, 50); 


使 用 strokeText() 时 ， 文 本 的 中 部 是 空白 的 。 当 然 ， 如 果 你 想得到 加 了 彩色 描 边 的 文本 ， 可 
以 先 调用 fllText() 绘 制 实心 文本 ,然后 调用 strokeText() 绘 制 文本 的 轮廓 。 图 9-2 展 示 了 这 两 个 
方法 绘制 的 文本 。 























ee = 时 加 国 到。 图 9-2: 在 画布 上 绘制 实心 文本 和 空心 文本 都 很 简单 
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提示 与 绘制 线条 和 图 片 相 比 , 绘制 文本 的 速度 稍 慢 一 些 。 如 果 你 想 创 建 静态 、 不 变 的 图 像 ( 如 
数据 图 表 )， 这 个 速度 不 是 问题 。 但 是 ， 如 果 你 想 创建 交互 、 动 态 的 应 用 ， 那 么 绘制 文本 


的 速度 可 能 就 会 影响 性 能 。 至 于 优化 速度 的 手段 ， 可 能 就 是 事先 把 文本 保存 为 图 片 ， 然 
后 再 使 用 drawImage() 把 图 片 绘制 到 画布 上 。 


9.2 ”阴影 与 填充 


现在 , 我 们 在 画布 上 绘制 线条 和 填充 图 形 时 , 使 用 的 都 是 实 色 。 这 当然 没有 问题 ,不 过 要 是 
告诉 大 家 Canvas 还 有 一 些 新 奇 的 绘图 功能 ， 有 创意 的 设计 师 一 定 会 兴高采烈 。 比 如 ， 可 以 在 画 
布 上 为 图 形 绘制 模糊 的 阴影 , 可 以 用 小 图 案 来 填充 图 形 。 当然, 最 令 人 拍手 叫绝 的 还 是 渐变 功能 ， 
把 多 种 颜色 组 合 起 来 ， 能 够 形成 千变万化 的 模式 。 
接 下 来 的 几 节 我 们 就 来 介绍 这 些 新 功能 , 实际 上 只 要 简单 地 设置 绘图 上 下 文 的 另外 一 些 属 性 
就 好 了 。 





















































9.2.1 添加 阴影 
为 绘制 的 任何 内 容 添加 阴影 是 Canvas 最 便利 的 功能 。 图 9-3 展 示 了 几 种 阴影 的 示例 。 











238 | 第 9 章 高 级 Canvas 技术 : 交互 性 和 动画 

















ES 蕊 吉大 汪 | 图 9-3， 阴 影 与 形状 、 图 片 和 文本 一 样 。 特 别 
二 一 | 是 给 带 透 明 背 景 的 图 片 加 阴影 时 ， 阴 影 的 形 
状 会 随 不 透明 部 分 的 形状 变化 ， 比 如 图 中 右 
: 上 角 的 五 角 星 ， 其 阴影 的 形状 也 是 相同 的 五 
高 角形 ， 而 不 是 方形 。 ( 在 编写 本 书 时 ， 还 只 

: 有 IE 和 Firefox 支 持 这 个 功能 。) 阴影 与 文本 也 
是 相辅相成 ， 而 且 设 置 不 同 ， 阴 影 的 效果 也 
不 一 样 


























€ ) 字 | | file///C/HTIMLS/Chapter 07/Shadows.html -CG 会 | 四- 
[RS - 





























: This is a subtle, slighly old-fashioned shadow. 


: This is a distant shadow... 























本 质 上 ， 可 以 把 阴影 看 成 原来 绘制 内 容 ( 直线 、 形 状 、 图 片 或 文本 ) 的 模糊 版 。 控 制 阴影 的 
外 观 ， 需 要 使 用 绘图 上 下 文 的 儿 个 属性 ， 如 表 9-1 所 示 。 


表 9-1 ”阴影 相关 的 属性 

















属 性 说 ” 明 
shadowColor 设置 阴影 颜色 。 可 以 把 阴影 设置 为 黑色 或 彩色 , 但 中 性 灰 还 是 最 佳 选 择 。 另 外 一 种 技术 是 使 用 








半 透 明 的 颜色 (参见 6.1.5 节 ) ， 以 便 下 方 内 容 可 以 若隐若现 。 在 不 需要 阴影 的 时 候 ， 可 以 把 
shadowColor 设 置 为 完全 透明 
shadowBlur 设置 阴影 的 模糊 程度 。 值 为 0 表示 锐利 的 阴影 ， 结 果 会 生成 原始 形状 的 一 个 轮廓 鲜明 的 副本 。 
相对 来 说 , 值 为 20 的 时 候 已 经 比较 模糊 了 ,不 过 当然 还 可 设置 更 大 的 值 。 一 般 来 说 ,这 个 值 不 
小 于 3 才 会 达到 最 佳 效 果 









































shadowOffsetX 设置 阴影 相对 于 内 容 的 位 置 。 例 如 ， 把 这 两 个 属性 都 设置 为 5， 会 导致 阴影 被 绘制 到 原 图 形 向 
shadowOffsetY 右 和 右 下 各 5 像素 的 位 置 。 使 用 负 值 可 以 把 阴影 移动 到 其 他 位 置 ( 左 和 上 ) 





以 下 是 创建 图 9-3 中 所 示 各 种 阴影 的 代码 : 


// 绘 制 和 矩形 阴影 

Context .Tect(20，20，200，100); 
context.fillStyle = "#8ED6FF"; 
context.shadowColor = "#bbbbbb"; 
context.shadowBlur = 20; 


context.shadowOffsetX = 15; 
context.shadowOffsetY = 15; 
context.fill(); 
// 绘 制 星 形 阴 影 
context.shadowOffsetX = 10; 
Context.shadowOffsetY = 10; 





9.2 ”阴影 与 填充 | 239 


context.shadowBlur = 4; 
img = document.getElementById("star"); 
context.drawImage(img, 250, 30); 


context.textBaseline = "top"; 
context.font = "bold 20px Arial"; 


// 绘制 三 行文 本 的 阴影 
context.shadowBlur = 3; 
context.shadowOffsetX = 2; 
Context.shadowOffsetY = 2; 
context.fillstyle = "steelblue"; 


1 1 s 


context.fillText("This is a subtle, slightly old-fashioned shadow.", 10, 175); 


context.shadowBlur = 5; 

context.shadowOffsetX = 20; 

context .shadowOffsetY = 20; 

context.fillStyle = "green"; 

context.fillText("This is a distant shadow...", 10, 225); 


context.shadowBlur = 15; 
context.shadowOffsetX = 0; 
Context.shadowOffsetY = 0; 
Context .shadowColor = "black"; 
Context.fillstyle = "white"; 


context.fillText("This shadow isn't offset. It creates a halo effect.", 10, 


300); 


9.2.2 ”填充 图 案 


说 到 填充 , 我 们 到 目前 为 止 用 到 的 都 是 实 色 或 部 分 透明 
和 渐变 。 图 案 和 渐变 可 以 让 平 淡 无 奇 的 图 形 一 下 子 变 得 活 泌 
































的 颜色 。 除 此 之 外 , 还 可 以 使 用 图 案 
起 来 。 这 两 种 填充 方式 很 简单 ， 只 要 


两 步 。 首 先 , 创建 要 填充 的 内 容 。 然 后 , 将 其 添加 到 fillstyle 属 性 (有 时 候 需要 使 用 strokestyle 


属性 )。 








要 实现 用 图 案 填 充 , 首先 要 选择 一 张 小 图 片 , 而 且 要 能 够 前 后 左右 拼接 在 一 起 覆盖 一 块 大 区 
域 (参见 图 9-4 )。 当 然 , 需要 利用 前 面 介绍 的 技术 把 这 张 图 片 加 载 到 图 片 对 象 中 ， 比 如 在 页 面 中 














放 一 个 隐藏 的 <img> 元 素 ( 参见 9.1 节 ), 或 者 使 用 代码 创建 图 
处 理 图 片 对 象 的 onLoad 事 件 (参见 9.1.1 节 )。 在 此 ， 我 们 使 月 














片 对 象 , 把 外 部 图 片 加 载 进 来 , 然后 
第 一 种 方法 : 











var img = document.getElementById("brickTile"); 





有 了 图 片 对 象 后 ， 就 可 以 利用 绘图 上 下 文 的 createPattern() 方 法 创建 一 个 图 案 对 象 。 此 时 ， 
可 以 选择 图 案 是 水 平 (repeat-x )、 垂 直 ( repeat-y )， 还 是 在 两 个 方向 ( repeat ) 重复 : 








var pattern = context.createpattern(img, "repeat"); 
最 后 是 使 用 图 案 对 象 设置 fillstyle 或 strokeStyle 属 性 : 


context.fillsStyle = pattern; 
context.rect(0, 0, canvas.width, canvas.height); 
context.fill1(); 
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这 样 ， 就 创造 出 了 用 小 幅 图 片 填充 画布 的 效果 ， 如 图 9-4 所 示 。 























TT TT TT TT | 图 9-4; 左 : 作为 图 案 的 图 片 。 右 ; 


1 
EY Je ey a 通过 拼接 图 案 形成 的 整体 效果 


于 | 
2 2 

[| 
rr 











9.2.3 填充 渐变 


第 二 种 填充 形式 是 渐变 ,也 就 是 混合 在 一 起 的 两 种 或 多 种 颜色 。Canvas 支 持 线性 渐变 和 放射 
性 渐变 ， 图 9-5 展 示 了 这 两 种 渐变 形式 。 














fr ，、 ”时 革 到。 图 9-5: 线性 渐变 ( 左上 ) 是 在 一 个 方向 上 混合 色彩 。 放 射 性 
|。 ea a6 渐变 (右上 ) 是 从 一 点 向 四 周 混合 色彩 。 这 两 种 渐变 形式 者 
| 支持 多 种 颜色 混合 ， 因 此 使 用 线性 渐变 可 以 创造 出 色谱 效果 
( 左下 ) ,使 用 放射 性 渐变 可 以 创造 出 同心 圆 扩散 的 效果 ( 右 
下 ) 












































提示 “如 果 读 者 是 在 黑白 纸 质 书 上 看 这 个 图 中 的 渐变 效果 ， 建 议 你 访问 http:/prosetech. 
comyhtml15 ， 看 看 真实 网 页 中 丰富 的 和 色彩， 估计 会 震撼 你 一 小 下 。( 网 页 中 的 绘图 代码 也 
包含 绘制 心 形 的 逻辑 ， 每 个 心 形 都 是 通过 把 4 条 贝 塞 尔 曲线 连接 成 一 段 路 径 做 出 来 的 。) 
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法 : 


估计 读者 也 猜 到 了 , 使 用 渐变 填充 的 第 一 步 是 创建 渐变 对 象 。 绘 图 上 下 文 为 此 提供 了 两 个 方 
cieateLinearGradient() 和 createRadialGradient()。 这 两 个 方法 的 用 法 大 致 相同 ， 即 它们 接 


收 一 组 坐标 ， 表 示 不 同 颜色 的 起 点 。 





理解 渐变 的 最 简单 方式 就 是 看 一 个 例子 。 以 下 代码 创建 的 是 图 9-5 左 上 角 心 形 的 渐变 : 


// 创 建 一 个 从 (10,0) 到 (100,0) 的 渐变 
var gradient = context.createlLinearGradient(10, 0, 100, 0); 


// 添 加 两 种 颜色 
gradient.addColorStop(0, "magenta"); 
gradient.addColorStop(1, "yellow"); 


// 调 用 另 一 个 函数 绘制 心 形 
drawHeart(60, 50); 


// 填 充 心 形 

context.fillStyle = gradient; 
context.fill(); 

context. stroke(); 


这 里 是 创建 线性 渐变 ， 因 此 我 们 给 createLinearGradient() 传 人 两 个 坐标 点 ， 分 别 表示 渐变 








的 起 点 和 终点 。 起 点 和 终点 构成 了 颜色 逐渐 过 渡 的 区 间 。 


起 点 到 终点 的 渐变 线 很 重要 ， 因 为 它 决定 了 渐变 的 最 终 效 果 ( 参见 图 9-6 )。 例 如 一 个 从 品 红 


过 渡 到 黄色 的 线性 渐变 ， 这 个 渐变 可 以 在 几 个 像素 的 距离 上 完成 ， 也 可 以 跨越 整个 画布 的 宽度 。 
而 且 , 渐变 可 以 是 从 左 到 右 ， 也 可 以 是 从 上 到 下 ,甚至 发 生 在 两 个 任意 点 之 间 (渐变 线 的 角度 可 
以 任意 变化 )。 总 之 ， 渐 变 线 决定 了 这 一 切 。 

















提示 “可 以 把 渐变 想象 成 位 于 画布 下 方 的 彩色 图 样 。 在 创建 渐变 时 ， 你 是 在 创建 这 个 彩色 但 却 


隐藏 的 图 样 。 而 在 填充 图 形 时 ， 你 会 在 画布 上 按照 图 形 的 形状 抠 出 一 个 洞 ， 从 而 让 下 面 
那 部 分 图 样 显 示 出 来 。 实 际 的 效果 ( 在 画布 上 呈现 的 结果 )， 取 决 于 渐变 的 设置 和 形状 的 
大 小 及 位 置 。 





对 这 个 例子 而 言 ， 渐 变 线 的 起 点 和 终点 分 别 是 (10,.0) 和 (100,0)。 这 两 个 点 决定 以 下 重要 信息 。 

口 渐变 是 水 平 的 。 也 就 是 说 ， 渐 变 的 颜色 将 从 左 到 右 混 合 。 之 所 以 知道 渐变 是 水 平 的 ， 是 
因为 这 两 个 点 的 y 轴 坐标 相等 。 如 果 你 想 创建 从 上 到 下 的 渐变 , 可 以 把 起 点 和 终点 设置 为 
(0,10) 和 (0,100)。 类 似 地 ， 对 角 线 方向 的 渐变 ( 从 左上 到 右 下 )， 可 以 使 用 (10,10) 和 
(100,100)。 

口 实际 的 混合 颜色 区 宽度 为 90 个 像素 〈x 坐 标 从 10 到 100) 。 在 这 个 例子 中 ， 心 形 比 渐变 范 

围 稍 小 一 些 ， 因 此 可 以 在 心 形 里 看 到 大 部 分 渐变 。 

口 超过 渐变 范围 的 颜色 会 变 成 实 色 。 因此, 如 果 把 心 形 设置 得 更 宽 , 就 会 看 到 更 多 品 红 ( 左 ) 
和 黄色 ( 右 )。 
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渐变 线 的 起 点 (10,0) 





渐变 线 的 终点 (100,0) 




















部 分 




















图 9-6: 左 : 以 下 是 为 
图 9-5 左 下 角 的 心 形 生 
成 的 渐变 。 用 这 个 渐变 
填充 心 形 后 ， 只 能 看 到 
整个 渐变 的 一 部 分 。 右 : 
为 图 9-5 右 下 角 的 心 形 
生成 的 放射 性 渐变 ， 同 


样 也 只 是 整个 渐变 的 一 








提示 “一般 来 说 ， 我 们 创建 的 渐变 只 


恰好 比 要 填充 的 图 形 大 一 点 即 可 ， 正 如 这 个 例子 所 示 。 


当然 ， 也 还 有 其 他 可 能 。 比 如 ， 要 是 你 想 利 用 一 个 渐变 的 不 同 部 分 填充 几 个 图 形 ， 可 能 


就 需要 创建 一 个 画布 那么 


宽 的 渐变 。 


确定 了 渐变 线 的 宽度 和 角度 之 后 , 接 下 来 就 该 实际 地 设置 构成 渐变 的 颜色 了 。 要 设置 渐变 颜 
色 ， 需 要 使 用 渐变 对 象 的 addColorstop() 方 法 。 每 次 调用 这 个 方法 ， 都 需要 提供 一 个 0 一 1 的 偏 移 
值 和 一 个 颜色 值 (颜色 名 )。 其 中 ， 偏 移 值 决定 颜色 在 渐变 中 的 位 置 : 0 表示 位 于 渐变 的 起 点 ，1 


表示 位 置 渐变 的 终点 。 改 变 这 两 个 值 ( 比如 , 分 别 改 为 0.2 和 0.8 )， 就 会 压缩 渐变 的 范围 ， 


显示 出 更 多 的 实 色 。 





让 两 端 


在 创建 双色 渐变 时 , 最 好 将 0 和 1 分 别 作 为 两 种 颜色 的 偏 移 值 。 而 在 创建 多 种 颜色 构成 的 渐变 
时 ， 可 以 通过 选择 不 同 的 偏 移 值 来 加 宽 某 种 颜色 区 的 宽度 ， 或 者 缩小 某 种 颜色 的 范围 。 图 9-5 中 
左下 角 心 形 渐变 的 偏 移 值 是 平均 分 布 的 ， 即 每 种 颜色 的 范围 都 一 样 宽 : 


var gradient = context.createlLinearGradient(10, 0,100, 0); 
gradient.addColorStop("0", "magenta"); 














gradient.addColorStop(".25", 
gradient.addColorStop(".50", 
gradient.addColorStop(".75", 
gradient.addColorStop("1.0", 


drawHeart (60,200); 
context.fillStyle = gradient; 


"blue"); 
"green"); 
"yellow"); 
"red"); 





9.2 ”阴影 与 填充 


| 243 





Context .fil1(); 
context. stroke(); 


注意 ”如果 此 时 此 刻 你 感觉 天 旋 地 转 ， 别 慌 。 实 际 上 ， 你 不 用 理解 渐变 是 怎么 来 的 。 你 只 要 会 
调整 偏 移 值 就 够 了 ， 不 行 就 反复 调用 ， 直 至 得 到 满意 的 渐变 效果 为 止 。 

















创建 放射 性 渐变 与 创建 线性 渐变 类 似 。 只 不 过 ， 这 次 不 是 指定 两 个 点 ， 而 是 要 指定 两 个 圆 。 
这 是 因为 放射 性 渐变 就 是 颜色 从 一 个 小 圆 过 渡 到 一 个 更 大 的 、 包 含 它 的 圆 。 要 定义 圆 ， 需 要 提供 
圆心 坐标 和 半径 。 
在 图 9-5 右 上 和 角 那 个 放射 性 渐变 的 例子 中 ， 渐 变 的 起 点 是 在 心 形 内 部 ， 坐 标 为 (180,100)。 内 
部 颜色 由 一 个 半径 为 10 像 素 的 圆 表示 ， 外 部 颜色 由 一 个 半径 为 50 像 素 的 圆 表示 。 同 样 ， 在 小 圆 内 
部 或 者 大 圆 外 部 ( 即 超出 两 个 圆 范围 之 外 的 地 方 ) 会 显示 实 色 ， 因 此 该 放射 性 渐变 的 中 心 是 品 红 
色 ， 而 外 围 是 实心 黄色 。 

以 下 是 创建 这 个 双色 放射 性 渐变 的 代码 : 

var gradient = context.createRadialGradient(180, 100, 10, 180, 100, 50); 


gradient.addColorStop(0, "magenta"); 
gradient.addColorStop(1, "yellow"); 























drawHeart(180, 80); 
context.fillStyle = gradient; 
context.fill1(); 

context. stroke(); 


注意 ”把 两 个 圆 设 置 为 同心 圆 是 最 常见 的 做 法 。 不 过， 当然 可 以 给 内 圆 和 外 圆 设置 不 同 的 圆心 ， 
而 这 样 可 以 实现 拉 伸 、 压 缩 或 其 他 颜色 变形 效果 。 


在 这 个 例子 的 基础 上 ， 我 们 可 以 创建 图 9-5 右 下 角 那 个 多 色 放 射 性 渐变 效果 。 只 要 把 两 个 圆 
的 圆心 坐标 平移 到 那个 心 形 的 内 部 ， 然 后 再 〈 使 用 渐变 对 象 的 addColorstop() 方 法 ) 加 上 不 同 的 
色 标 (与 创建 多 色 线 性 渐变 时 使 用 的 色 标 相同 ) 即 可 : 


var gradient = context.createRadialGradient(180, 250, 10, 180, 250, 50); 
gradient.addColorStop("0", "magenta" ); 
gradient.addColorStop(".25", "blue"); 
gradient.addColorStop(".50","green"); 
gradient.addColorStop(".75","yellow"); 
gradient.addColorStop("1.0","red"); 





drawHeart(180, 230); 
context.fillStyle = gradient; 
context.fill1(); 

context. stroke(); 


好 了 ， 以 你 现在 掌握 的 技术 ， 要 创建 出 光怪陆离 的 图 案 已 经 不 成 问题 了 。 
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9.2.4 综合 示例 : 绘制 图 解 


既然 你 已 经 历尽 千 难 万 险 , 征服 了 Canvas 绘 图 更 具有 挑战 性 的 功能 , 现在 该 停 下 来 好 好 享受 
一 下 胜利 果实 了 。 下 面 ,我们 将 介绍 一 个 示例 ,看 看 怎么 利用 Canvas 把 一 堆 毫 无 吸引 力 的 文本 和 
数字 ， 转 换 成 简单 而 漂亮 的 图 解 。 
图 9-7 展 示 了 这 个 示例 的 起 点 状态 : 由 两 个 页 面 组 成 的 个 性 测试 ， 其 中 点 缀 着 一 些 图 片 。 用 
户 在 第 一 个 页 面 回答 问题 ， 然 后 点 击 Get Score 转 到 下 一 页 。 第 二 页 根据 第 一 页 众所周知 的 “大 五 
人 格 理论 ”得 到 个 性 测试 的 得 分 〈 参 见 后 面 的 附注 栏 )。 


















































国王 尾村 | 图 9-7， 点 击 回答 问题 ( 上 )， 然 后 看 看 得 分 
© © C\HTMLS\Chapter ON\PersonalityTest.html PD->XIIn i osm 
Fe ( 下 )。 然 而 ， 这 个 测试 没有 可 视 化 的 刻度 ， 
































一 般 人 很 难 理解 结果 分 数 的 具体 含义 
Five Factor Personality Test 


9 9 I don't mind being the center of attention. 





I feel little concern for others. 
I'm always prepared. 

团 I get stressed out easily. 

司 I have a rich vocabulary. 

I don't talk a lot. 

同 I make people feel at ease. 

明 Il1eave my belongings lying around. 


Im relaxed most of the time. 
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F1ve Factor 
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The Results 





Extraversion: 0 
Accommodation: -12 
Conscientiousness: 5 
Neuroticism: 19 


Openness: -11 





























这 个 示例 的 JavaScript 代 码 非 常 容易 理解 。 在 用 户 单 击 一 个 数字 按钮 时 , 按钮 背景 会 改变 , 以 
反映 用 户 的 选择 。 而 用 户 回 答 完 所 有 问题 后 ， 会 有 一 个 简单 的 算法 ， 把 答案 传 给 一 组 计 分 公式 ， 
从 而 计算 出 5 个 人 格 因素 。 如 果 你 想 看 一 下 完整 的 代码 ， 或 者 想 动手 试 一 试 ， 可 以 访问 
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http:/prosetech.comy/htmls 。 

到 目前 为 止 ， 还 没有 使 用 HTMLS。 不 过 ， 请 大 家 考虑 一 下 怎么 改进 这 个 两 页 的 人 格 测试 示 
例 ， 比 如 通过 图 解 形式 显示 5 个 人 格 因素 的 得 分 情况 。 图 9-8 展 示 了 对 这 个 人 格 测试 的 结果 页 面 进 
行 改进 之 后 的 结果 ， 即 以 图 解 形式 显示 了 得 分 。 























rE 站 一 人 二 图 9-8: 这 个 页 面 使 用 了 几 种 不 同 的 给 
全 L] file///C:/HTMLS5/Chapter 07/PersonalityTest_Score.html -CI 会 | 加- 图 方式 9 绘 制 了 直线 、 医 像 和 文本 o 














a 日 旦 3 jl 产 : 天 是 省 渤 答 安 二 
Five Factor Personality Test 但 最 关键 的 地 方 还 是 根据 测试 答案 动 
The Results 态 绘制 的 图 示 


Extraversion: 0 




















4 六 > 
Accommodation: -12 
二 一 余 > 
Conscientiousness: 5 
本 资 > 
Neuroticism: 19 
本 A 
Openness: -11 
本 窒 4 
怎样 把 人 格 转换 成 5 个 数字 


大 五 人 格 测试 根据 每 个 人 的 五 方面 人 格 “因素 ”来 确定 性 格 。 这 五 方面 因素 是 : 开放 性 、 
责任 心 、 外 倾 性 、 亲 和 力 和 情绪 稳定 性 。 这 些 因素 是 研究 人 员 在 分 析 了 人 们 用 成 千 上 万 个 英语 
形容 词 描 述 的 性 格 特征 之 后 提炼 出 来 的 。 

为 了 得 到 五 方面 信息 ,心理 学 家 综合 运用 了 基准 统计 信息 、 个 性 调查 和 计算 机 。 他 们 希望 
知道 人 们 会 选择 哪些 形容 词 , 然后 据 以 提炼 出 最 小 的 性 格 特征 。 比 如 , 认为 自己 乐于 助人 的 人 ， 
一 般 会 把 自己 描述 为 喜欢 社交 和 过 集体 生活 , 因此 就 可 以 把 这 些 特征 归纳 为 一 个 人 格 因素 ( 心 
理学 家 称 其 为 外 倾 性 )。 经 过 对 近 两 万 个 形容 词 的 研究 ， 他 们 最 终归 纳 出 五 个 最 相关 的 因素 。 

要 了 解 “大 五 性 格 模型 ”的 更 多 信息 ， 读 者 可 以 参考 http://tinyurl.com/big-five-p， 或 Your 
Brain: The Missing Manual ( O’Reilly)。 








为 了 显示 图 解 ， 结 果 页 面 中 使 用 了 5 个 Canvas， 每 个 对 应 一 个 人 格 因素 。 以 下 是 相应 的 
标记 : 
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<header> 
<h1>Five Factor Personality Test</h1i> 
<p>The Results</p> 

</header> 


<div class="score"> 

<h2 id="headingE">Extraversion: </h2> 

<canvas id="canvasE" height="75" width="550"></canvas> 
</div> 


<div class="score"> 

<h2 id="headingA">Accommodation: </h2> 

<canvas id="canvasA" height="75" width="550"></canvas> 
</div> 


<div class="score"> 

<h2 id="headingC">Conscientiousness: </h2> 

<canvas id="canvasC" height="75" width="550"></canvas> 
</div> 


<div class="score"> 

<h2 id="headingN">Neuroticism: </h2> 

<canvas id="canvasN" height="75" width="550"></canvas> 
</div> 


<div class="score"> 

<h2 id="heading0">Openness: </h2> 

<canvas id="canvas0" height="75" width="550"></canvas> 
</div> 


每 个 图 示 都 使 用 了 同一 个 自 定义 JavaScript 函 数 ，plotScore()。 这 个 页 面 调用 了 plotScore() 
函数 $ 次 ， 每 次 都 传人 不 同 的 参数 。 例 如 ， 在 页 面 顶部 绘制 “外 倾 性 ”的 图 示 时 ， 传 递 的 参数 是 
最 顶部 的 Canvas 元 素 、 分 数 (从 -20~20 的 值 )， 以 及 文本 标题 (“Extraversion”) : 


window.onload = function() { 





// 取 得 显示 外 倾 性 图 示 的 画布 
var canvasE = document.getElementById("canvasE"); 





// 将 分 数 添 加 到 对 应 的 标题 后 面 
// (分 数 保存 在 变量 eXtraversion 里 ) 
document .getElementById("headingE").innerHTML += extraversion; 





// 在 对 应 的 画布 中 标 绘 分 数 
plotScore(canvasE, extraversion, "Extraversion"); 
, a 
下 面 再 看 看 plotScroe() 函 数 ， 该 函数 执行 一 系列 绘图 代码 ， 根 据 前 面 介绍 的 知识 ， 读 者 应 
该 不 难 理解 这 些 代 码 。 总 之 , 代码 中 使 用 了 各 种 绘图 上 下 文 的 方法 , 绘制 了 分 数 图 示 的 不 同 部 分 : 


function plotScore(canvas, score, title) { 
var context = canvas.getContext("2d"); 











// 在 图 示 的 两 端 绘制 简 头 








9.2 ”阴影 与 填充 | 247 


var img = document.getElementById("arrow left"); 
context.drawImage(img, 12, 10); 

img = document.getElementById("arrow right"); 
context.drawImage(img, 498, 10); 


// 绘 制 租 头 之 间 的 刻度 线 

context .moveTo(39, 25); 
context.lineTo(503, 25); 
context.lineWidth = 10; 
context.strokeStyle = "rgb(174,215,244)"; 
context .stroke(); 


// 把 数值 写 在 刻度 位 置 上 

context.fillStyle = context.strokeStyle; 
context.font = "italic bold 18px Arial"; 
context.textBaseline = 'top'; 


context.fillText("-20", 35, 50); 
context.fillText("0", 255, 50); 
context.fillText("20", 475, 50); 


// 绘 制 星星 ， 显 示 分 数 在 图 示 上 的 位 置 
img = document.getElementById("star"); 
context.drawImage(img, (score+20)/40*440+35-17, 0); 


} 

最 重要 的 是 最 后 一 行 代码 ,这 行 代码 通过 有 点 不 好 理解 的 公式 ,把 星星 绘制 在 正确 的 位 置 上 : 

context.drawImage(img, (score+20)/40*440+35-17, 0); 

这 里 稍微 解释 一 下 。 首 先是 把 分 数 转换 为 0~ 100 的 百分比 值 。 因 为 分 数 一 般 会 落 在 -20 一 20 
这 个 区 间 内 ， 所 以 代码 第 一 步 要 把 这 个 分 数 转 换 成 0~40 的 值 : 














score+20 
而 用 这 个 值 除 以 40 就 可 以 得 到 百分比 值 : 
(score+20)/40 


得 到 百分比 值 后 ， 接 下 来 需要 用 它 乘 以 刻度 线 的 长 度 。0% 表 示 在 最 左 端 ，100% 表 示 在 另外 
一 端 ， 而 其 他 百分比 值 的 结果 就 是 位 于 两 端 之 间 : 

(score+20)/40*440 

如 果 刻 度 线 的 x* 坐 标 是 从 0 到 400， 这 个 公式 就 已 经 够 用 了 。 但 实际 上 ， 这 条 线 是 从 画布 左边 
偏 右 一 点 绘制 的 ， 目 的 是 为 了 留 下 一 些 空间 。 因 此 ， 需 要 在 绘制 星星 时 也 偏 移 相 应 的 像素 数 : 

(score+20)/40*440+35 

可 是 , 这 样 只 把 星星 的 左边 放 到 正确 的 位 置 上 。 而 我 们 实际 上 是 想 把 星星 的 中 心 点 放 在 该 位 
置 。 为 了 补偿 这 个 距离 ， 需 要 再 减 去 星星 宽度 的 一 半 : 

(score+20)/40*440+35-17 


这 就 是 根据 分 数 计算 得 到 的 星星 的 x 坐标 了 。 
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注意 ”从 静态 绘图 到 这 个 例子 中 所 展示 的 根据 数据 来 动态 绘图 , 应 该 说 只 是 向 前 跨越 了 一 小 步 。 
而 哪怕 是 跨越 了 这 一 小 步 之 后 ， 你 就 具备 了 创建 各 种 数据 驱动 图 表 的 经 验 ， 无 论 是 传统 
的 饼 图 ， 还 是 使 用 刻度 盘 和 计量 仪 的 信息 图 。 什 么 ， 有 没有 简化 工作 的 工具 ? 有 啊 ， 推 
荐 大 家 使 用 Canvas 图 形 库 ， 这 些 库 包含 写 好 的 JavaScript 函 数 ， 可 以 根据 你 的 数据 绘制 常 
见 的 图 表 。 比 如 ，RGraph (http://www.rgraph.net/ ) 和 ZingChart ( http://www.zingchart.com/ ) 
都 是 不 错 的 选择 。 


9.3 ”赋予 图 形 交 互 能 力 


Canvas 是 一 种 非 保 留 性 的 绘图 界面 。 换 名 话说 ， 它 不 会 记录 过 去 执行 的 绘图 操作 ， 而 只 是 保 
持 最 终结 果 一 一 构成 图 像 的 彩色 像素 。 

比如 ， 你 要 在 画布 中 央 绘 制 一 个 红色 的 正方 形 ， 调 用 stroke() 或 fil1() 之 后 ， 那 个 正方 形 仅 
仅 就 是 包含 红色 像素 的 正方 形 区 域 。Canvas 不 会 保存 这 个 正方 形 区 域 。 

这 个 模型 能 保证 绘图 速度 ,但 同时 也 导致 不 便 为 绘制 的 图 形 添加 交互 性 。 假 设 你 想 为 图 8-11 
所 示 的 画图 程序 创建 一 个 更 智能 的 版 本 , 比如 不 仅 支持 画 线 , 还 支持 画 和 矩形 。( 支持 画 和 矩形 不 难 。) 
而 且 , 不 仅 支 持 画 抢 形 ,还 要 支持 让 用 户 选 择 、 拖 动 和 矩形, 以 及 调整 矩形 大 小 、 改 变 颜色 ,等 等 。 
在 实现 这 些 功能 之 前 ,必须 理 清 几 方面 思路 。 首 先 ， 怎么 知道 用 户 选 择 了 矩形 ? 其 次 ,怎么 知道 
和 矩形 的 相关 信息 ， 比 如 坐标 、 大 小 、 描 边 颜 色 、 填 充 颜 色 ? 最后， 怎么 知道 画布 上 其 他 形状 的 信 
息 一 一 这 些 信息 在 需要 改变 矩形 和 重 绘画 布 时 有 用 ? 

要 解决 这 些 问题 ， 把 Canvas 变 得 具有 交互 性 ， 必 须 记 录 绘 制 的 每 一 个 对 象 。 此 外 ,在 用 户 单 
击 Canvas 中 的 某 个 地 方 时 ， 还 要 检测 被 单 击 的 是 不 是 其 中 一 个 图 形 ( 这 个 过 程 叫 碰撞 检测 )。 如 
果 能 实现 这 两 个 任务 ， 剩 下 的 〈 修改 某 个 图 形 或 重 绘画 布 ) 就 简单 了 。 


9.3.1 记录 绘制 的 内 容 


为 了 修改 和 重 绘画 面 ， 必 须 先 知道 要 修改 和 重 绘 什么 内 容 。 就 以 图 9-9 所 示 的 绘制 圆圈 的 程 
序 为 例 ， 但 为 了 简单 起 见 ， 其 中 包含 的 圆圈 的 大 小 、 颜 色 各 不 相同 。 

为 了 记录 每 一 个 圆圈 ， 需 要 知道 它们 的 位 置 、 半 径 以 及 填充 色 。 与 其 声明 一 大 堆 变 量 来 保存 
这 些 信息 ， 不 如 把 上 述 4 个 值 都 放 在 同一 个 小 数据 结构 中 。 这 个 数据 结构 就 是 自 定义 对 象 。 

什么 ,不 知道 怎么 创建 自 定义 对 象 ? 下 面 就 是 一 种 标准 的 做 法 。 首 先 , 创建 一 个 函数 ， 函 数 
名 就 是 用 于 创建 这 种 对 象 的 类 型 名 。 比 如 ， 要 创建 一 种 圆圈 类 型 ， 可 以 把 函数 命名 为 Circle(): 

function Circle() { 

} 

然后 ， 需 要 让 这 个 对 象 能 保存 数据 。 为 此 ， 要 使 用 关键 字 this 来 创建 属性 。 比 如 ， 要 为 将 来 
的 对 象 创建 一 个 radius 属 性 ， 以 便 记 录 它 的 大 小 , 应 该 在 Circle() 函 数 中 给 this.radius 赋 一 个 起 
始 值 。 
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[= © me) 图 9-9: 这 个 绘制 圆圈 的 程序 是 交互 






































fh AN S|] C\HTML5\Chapter O7\InteractiveCircles.html Dv OX| 1 Tr S03 性 的 。 单 击 可 以 选择 一 个 圆 ( 边框 会 
Interactive cirdles < [id 变 成 另 一 种 颜色 ) ， 而 且 能 把 它 拖 动 
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下 面 这 个 函数 用 3 个 属性 定义 一 个 圆 一 一 x 坐标 、y 坐 标 和 半径 : 


function Circle() { 


this.x = 0; 

thix.y = 0; 

this.radius = 15; 
} 





Circle() 也 数 里 的 数字 都 是 默认 值 。 用 这 个 函数 新 建 一 个 圆圈 对 象 时 , 可 以 修改 每 个 属性 的 值 。 

添加 了 所 有 所 需 的 属性 之 后 ， 就 可 以 用 这 个 函数 创建 对 象 了 。 这 里 就 是 使 用 Circle() 函 数 来 
创建 新 的 圆圈 对 象 了 。 这 里 的 关键 是 并 非 要 调用 该 函数 ， 而 是 要 使 用 new 关 键 字 来 创建 它 的 一 个 
副本 ， 比 如 : 

// 创 建 一 个 新 的 Circle 对 和 象 ， 并 将 其 保存 在 变量 myCircle 中 


var myCircle = new Circle(); 

有 了 这 个 圆圈 对 象 ， 就 可 以 像 下 面 这 样 来 访问 它 的 属性 : 

// 修 改 半 径 

myCircle.radius = 20; 

不 仅 如 此 , 要 是 你 想 让 定义 新 圆圈 对 象 的 过 程 更 灵活 一 些 , 还 可 以 为 Circle() 函 数 传递 参数 。 
这 样 就 可 以 在 创建 新 圆圈 对 象 的 时 候 ， 一 次 性 设置 圆圈 的 所 有 属性 。 下 面 就 是 用 于 创建 图 9-9 中 
圆圈 对 象 的 另 一 个 Circle() 函数 : 


function Circle(x, y, radius, color) { 
this.x = x; 
this.y = y; 
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this.radius = radius; 
this.color = color; 
this.isSelected = false; 


} 

这 里 的 isSelected 属 性 值 不 是 true 就 是 false。 在 用 户 单 击 这 个 圆圈 时 ，isSelected 的 值 就 会 
变 成 true， 而 此 时 绘图 代码 就 知道 应 该 为 它 绘 制 一 个 不 同 的 边框 了 。 

使 用 这 个 circle() 子 数 ， 可 以 利用 如 下 代码 来 创建 一 个 圆圈 对 象 : 

var myCircle = new Circle(0, 0, 20, "red"); 

当然 ,圆圈 绘图 程序 最 终 是 要 支持 用 户 画 任意 圆圈 的 。 所 以 不 可 能 只 创建 一 个 圆圈 对 象 。 为 
此 , 需要 创建 一 个 数组 , 用 于 保存 所 有 圆圈 。 下 面 就 是 我 们 这 个 例子 中 所 要 用 到 的 全 局 数组 变量 : 

var circles = []; 

剩 下 的 代码 也 不 难 。 在 用 户 单 击 Add Circle 按 钮 创建 新 的 圆圈 时 , 就 会 触发 addRandomCircle() 
函数 。addRandomCircle() 函数 会 以 随机 大 小 、 颜 色 和 坐标 值 绘制 一 个 圆圈 : 


function addRandomCircle() { 
// 为 圆圈 计算 一 个 随机 大 小 和 位 置 
var radius = randomFromTo(10, 60); 
var x = randomFromTo(0, canvas.width); 
var y = randomFromTo(0, canvas.height); 




















// 为 圆圈 计算 一 个 随机 颜色 

var colors = ["green", "blue", "red", "yellow", "magenta", 
"orange", "brown", "purple", "pink"]; 

var color = colors[randomFromTo(0, 8)]; 








// 创 建 一 个 新 回转 
var circle = new Circle(x, y, radius, color); 





// 把 它 保 存在 数组 中 
circles.push(circle); 


// 重 新 绘制 画布 
drawCircles(); 


} 

以 上 代码 也 利用 了 另 一 个 自 定义 函数 randomFromTo()， 它 在 某 个 范围 内 生成 随机 数 。 

( 要 查看 全 部 代码 ， 请 访问 http://prosetech.com/html5。) 

最 后 一 步 当 然 就 是 基于 当前 圆圈 的 集合 实际 地 在 画布 上 绘图 了 。 创 建新 圆圈 后 ， 
addRandomCircle() 调 用 了 男 一 个 孔 数 drawCircles() 来 执行 绘图 操作 。drawCircles() 郧 数 会 遍历 
圆圈 数组 ， 像 下 面 这 样 : 

for(var i=0; icircles.length;j i++) { 

var circle = circles[i]; 
} 
以 上 代码 使 用 可 靠 的 for 循 环 ( 详细 介绍 请 参考 附录 B )。 花 括号 中 的 代码 块 针 对 每 个 圆圈 都 
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会 运行 一 次 。 第 一 行 代码 先 从 数组 中 取得 当前 圆圈 ， 将 其 赋 给 一 个 变量 ， 以 方便 后 面 使 用 。 
下 面 就 是 drawCircles() 函 数 的 完整 代码 ， 它 的 任务 就 是 根据 当前 圆圈 的 集合 来 填充 画布 : 
function drawCircles() { 

// 清 除 画 布 ， 准 备 绘制 
context.clearRect(0, 0, canvas.width, canvas.height); 


context.globalAlpha = 0.85; 
context.strokeStyle = "black"; 











// 人 遍历 所 有 圆圈 
for(var i=0; icircles.length;j i++) { 
var circle = circles[i]; 








// 绘 制 圆圈 
context.beginpath(); 

context.arc(circle.x, circle.y, circle.radius, 0, Math.PI*2); 
context.fillStyle = circle.color; 








context .fill(); 
context. stroke(); 


注意 圆圈 绘图 程序 每 次 刷新 画布 ， 都 会 先 使 用 clearRect() 方 法 清除 画布 上 的 所 有 内 容 。 有 些 
极其 追求 完美 的 程序 员 就 担心 这 一 步 操作 会 造成 画布 闪烁 ， 即 画布 上 的 圆圈 一 下 全 都 消 
失 ， 然 后 一 下 子 又 重新 出 现 。 不 过 ，Canvas 针 对 这 个 问题 进行 了 优化 。 换 句 话 说 ， 它 实 
际 上 会 在 绘图 逻辑 执行 完毕 后 才 清 除 或 绘制 所 有 内 容 ， 因 此 可 以 把 最 终结 果 流 畅 不 间断 
地 复制 到 画布 上 。 


现在 ， 圆 圈 仍 然 还 没有 交互 性 。 不 过 ， 页 面 中 用 于 记录 绘制 的 每 个 圆圈 的 代码 已 经 齐备 了 。 
尽管 画布 看 上 去 仍然 还 是 彩色 像素 块 , 但 我 们 的 代码 知道 画布 所 有 圆圈 的 精确 信息 。 而 这 就 意味 
着 可 以 随时 操作 这 些 圆 圈 。 

下 一 他， 我 们 就 来 看 看 如 何在 此 基础 上 让 用 户 选 择 圆 圈 。 


9.3.2 ”基于 坐标 的 碰撞 检测 


只 要 创建 交互 图 形 , 几乎 就 一 定 要 用 到 碰撞 检测 , 也 就 是 测试 某 个 点 是 否 “ 碰 到 ”了 某 个 图 形 。 
在 绘制 圆圈 的 程序 中 ， 我 们 需要 检测 用 户 单 击 的 点 是 否 碰 到 某 个 圆圈 ， 或 者 只 是 点 击 了 空白 区 域 。 
一 些 比较 完善 的 动画 开发 框架 ( 比如 Flash 或 Silverligh ) 可 以 帮 你 做 碰撞 检测 。 虽 然 也 有 一 些 
针对 Canvas 的 JavaScript 库 〈 如 KineticJS ) 能 提供 这 种 方便 ， 但 在 本 书 编写 时 还 没有 哪个 足够 成 
熟 ， 所 以 在 此 就 不 推荐 了 。 所 以 ，Canvas 粉 丝 们 最 好 的 选择 就 是 学 会 自己 写 碰撞 测试 代码 (做 
完 之 后 ,可 以 考虑 用 9.4.2 节 附注 “ 忙 人 (或 懒 人 ) 的 Canvas 动 画 ” 中 所 提 到 的 JavaScript 库 实践 一 


把 Canvas )。 
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为 做 碰撞 测试 , 就 要 检测 每 一 个 形状 , 计算 鼠标 点 击 的 那个 点 是 否 落 在 某 个 形状 里 。 如 果 是 ， 
说 明 单 击 “ 碰 到 ”了 该 形状 。 分 析 起 来 简单 ， 而 实现 起 来 可 就 远 没有 那么 容易 了 。 

第 一 件 事 儿 就 是 遍历 所 有 形状 。 这 个 循环 与 前 面 drawCircles() 函 数 所 用 的 循环 有 一 点 不 同 : 

for (var i=circles.length-1; i>=0; i--) { 

var circle = circles[i]; 

} 

不 同 之 处 是 这 里 的 代码 在 反问 侦 历 数组 : 从 末尾 开始 (末尾 的 索引 等 于 数组 中 包含 的 元 素数 
减 1 ),， 向 开头 迭代 ( 第 一 个 元 素 的 索引 为 0 )。 这 里 的 反 向 遍历 是 有 意 为 之 的 ， 因 为 在 大 多 数 应 用 
中 (包括 我 们 这 个 )， 都 会 按照 数组 中 列 出 对 象 的 顺序 来 绘制 对 象 。 结 果 ， 后 来 的 对 象 可 能 就 会 
车 加 在 先前 对 象 上 面 。 而 在 两 个 形状 奢 加 起 来 后 ， 那 么 单 击 的 只 能 是 上 面 的 那个 对 象 。 

要 确定 单 击 点 是 否 位 于 形状 内 ， 需 要 一 些 数学 计算 。 对 于 圆圈 而 言 ， 需 要 计算 单 击 点 与 圆心 
的 直线 距离 。 如 果 这 个 距离 小 于 等 于 圆圈 半径 ， 那 么 就 可 以 确定 单 击 点 位 于 圆圈 内 。 

在 我 们 这 个 例子 中 ， 页 面 会 处 理 Canvas 的 onClick 事 件 ， 以 检测 被 单 击 的 圆圈 。 当 用 户 单 击 
画布 时 ， 就 会 触发 canvasClick() 函 数 。 这 个 函数 会 取得 单 击 点 的 坐标 ， 然 后 检测 该 坐标 是 否 位 
于 某 个 圆圈 内 : 


function canvasClick(e) { 
// 取 得 画布 上 被 单 击 的 点 
var clickX = e.pageX - canvas.offsetLeft; 
var clickY = e.pageY - canvas.offsetTop; 


























// 查 找 被 单 击 的 圆圈 
for (var i=circles.length; i>0; i--) { 

// 使 用 匀 股 定理 计算 这 个 点 与 圆心 之 间 的 距离 

var distanceFromCenter = 

Math.sqrt(Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2)) 








// 这 个 点 在 圆圈 中 吗 
if (distanceFromCenter <= circle.radius) { 
// 清 除 之 前 选择 的 圆 图 
if (previousSelectedCircle != null) { 
previousSelectedCircle.isSelected = false; 


} 


previousSelectedCircle = circle; 




















// 选 择 新 园 圈 
circle.isSelected = true; 








// 更 新 显示 
drawCircles(); 


// 停 止 搜 索 
return; 
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注意 ”在 9.5.3 节 创建 迷宫 游戏 时 ， 我 们 还 会 看 到 另 一 种 碰撞 检测 : 取得 原始 像素 ， 比 较 它 们 的 








这 个 例子 的 最 后 ， 要 稍微 调整 一 下 drawCircles() 函 数 中 的 代码 。 现 在 ， 应 该 为 被 选择 圆圈 
加 点 标记 ， 让 它 突 出 出 来 ( 如 前 所 述 ， 这 里 会 加 上 一 个 粗 边框 ): 
function drawCircles() { 
// 循 环 所 有 圆 图 


for(var i=0; i<circles.length; i++) { 
var circle = circles[i]; 








if (circle.isSelected) { 
context.lineWidth = 5; 


else { 
context.lineWidth = 1; 


} 
} 

} 

这 个 例子 当然 还 可 以 更 加 完善 ,功能 更 强大 。 例如 ， 可 以 添加 一 个 命令 工具 条 ， 用 于 修改 圆 
圈 ( 修改 颜色 或 把 它 从 画布 上 删除 )。 或 者 , 允许 用 户 在 画布 上 拖 动 圆圈 。 为 此 ， 只 要 侦 听 Canvas 
的 onMouseMove 事 件 ， 相 应 地 修改 圆圈 的 坐标 ， 然 后 再 调用 drawCircles() 函 数 重 绘画 布 即 可 。( 这 
其 实 就 是 8.2 节 讨论 的 简单 画图 应 用 所 使 用 的 技术 ， 只 不 过 现在 是 基于 鼠标 移动 来 画图 ， 而 非 画 
线 。) 本 书 试验 站 点 (http://prosetech.com/html5 ) 中 的 InteractiveCircles WithDrag.html 页 面 ， 包 含 
了 一 个 演示 这 种 技术 的 例子 。 

记 住 这 个 要 点 : 只 有 记录 绘制 的 所 有 内 容 ， 才 能 在 将 来 灵活 地 修改 并 重 绘 它们 。 














9.4 给 Canvas 添加 动画 


绘制 一 幅 完 美的 图 画 已 经 够 复杂 的 了 , 所 以 就 算是 经 验 丰富 的 开发 人 员 , 让 他 实现 每 秒 绘制 
几 十 个 图 形 的 程序 ,也 难免 不 眉头 紧 锁 。 做 动画 的 关键 是 绘制 和 重 绘画 布 的 速度 要 足够 快 ， 这 样 
才能 让 人 感觉 移动 和 变化 自然 流畅 。 

动画 对 某 些 应 用 来 说 可 以 是 最 基本 的 ， 比 如 实时 游戏 、 物 理 模 拟 器 。 不 过 ， 比 较 简 单 的 动画 
在 包含 Canvas 的 页 面 中 同样 大 有 用 武之 地 。 可 以 通过 动画 来 突出 用 户 交 互 ( 例如 , 在 鼠标 悬 停 时 ， 
给 图 形 加 上 光 尝 、 让 图 形 跳 动 或 内 烧 )， 也 可 以 利用 动画 效果 来 吸引 人 注意 改变 的 内 容 〈 例 如 ， 
淡 入 新 场景 ,或 创建 “长 ”到 恰当 位 置 的 图 形 、 图 表 )。 如 此 说 来 ， 动 画 确实 是 为 网 页 增光 增 彩 
的 强大 手段 ， 能 给 人 活生生 的 感 党 ， 而 且 还 能 帮 我 们 从 一 大 堆 竞 争 者 中 脱颖而出 。 
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9.4.1 基本 的 动画 


在 HIML5 中 利用 Canvas 实 现 动 画 非常 容易 。 首 先 ， 要 设置 一 个 定时 器 ， 反 复 调 用 绘图 函数 
(一 般 每 秒 30 一 40 次 )。 每 次 调用 ， 都 会 重 绘 整个 画布 。 完 成 后 的 效果 就 像 动画 一 样 ， 每 一 帧 间 的 
过 渡 会 平滑 而 流畅 。 
JavaScript 为 控制 重复 绘制 提供 了 两 种 手段 。 
口 使 用 setTimeout () 函 数 。 这 个 函数 告诉 浏览 器 等 待 多 长 时 间 ( 毫秒 )， 然 后 再 运行 一 段 代 
码 ( 即 绘制 画布 的 代码 )。 运 行 代码 后 ， 可 以 再 调用 setTimeout() 让 浏览 器 准备 下 一 次 运 
行 。 如 此 往复 ， 直 至 动画 结 

口 使 用 setInterval() 函 数 。 这 个 函数 告诉 浏览 器 每 隔 一 定时 间 (如 20 毫 秒 ) 就 运行 某 一 段 
代码 。 它 与 setTimeout() 的 效果 类 似 , 但 只 需 调 用 setInterval() 一 次 。 要 阻止 浏览 器 继续 
运行 代码 ， 可 以 调用 clearInterval()。 

假如 运行 绘图 代码 的 速度 非常 快 , 使 用 这 两 个 函数 都 可 以 ,结果 都 一 样 。 可 假如 绘图 代码 没 
那么 快 ，setInterval() 则 能 保证 精确 地 按时 重 绘 ， 但 又 可 能 因此 牺牲 性 能 。( 最 差 的 情况 下 ， 如 
果 绘 图 代码 执行 时 间 比 设 定 的 时 间 还 要 长 ,浏览 器 将 很 难 跟 上 ， 随 着 绘图 代码 连续 执行 ,页 面 会 
出 现 短暂 地 停顿 。) 考虑 到 这 个 原因 ， 本 章 的 例子 都 使 用 setTimeout() 函 数 。 

调用 setTimeout() 时 ， 要 提供 两 个 参数 : 要 运行 的 函数 名 和 运行 该 函数 之 前 等 待 的 时 间 。 这 
里 的 时 间 要 使 用 毫秒 ( 千 分 之 一 秒 )， 因 此 20 毫 秒 (典型 的 动画 延迟 时 间 ) 就 是 0.02 秒 。 来 看 下 
面 这 个 例子 : 


var canvas; 
var context; 










































































window.onload = function() { 
canvas = document.getElementById("canvas"); 
context = canvas.getContext("2d"); 


// 每 0.02 秒 绘制 一 次 画布 
setTimeout(drawFrame, 20); 
}; 
任何 动画 的 关键 都 在 于 调用 setTimeout() 。 例 如 ， 要 想 编写 一 个 方形 从 上 到 下 荃 落 的 动画 ， 
就 需要 像 下 面 这 样 用 两 个 全 局 变量 跟踪 方形 的 位 置 : 
// 设 置 方形 的 初始 位 置 
var squarePosition y = 0; 
var squarePosition x = 10; 











接 下 来 ， 只 要 在 每 次 调用 drawFrame() 函数 时 改变 方形 的 位 置 ， 然 后 在 新 位 置 重 绘 方形 
即 可 : 
function drawFrame() { 
// 清 除 画 布 


context.clearRect(0, 0, canvas.width, canvas.height); 


// 调 用 beginPath()， 确 保 不 会 接着 上 次 绘制 的 图 形 绘制 
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Context .beginpPath(); 


// 在 当前 位 置 绘制 10 像 素 x10 像 素 的 方形 
context.rect(squarePosition x, squarePosition y, 10, 10); 
context.lineStyle = "black"; 

context.lineWidth = 1; 

context.stroke(); 


// 向 下 移动 1 像素 (下 一 帧 将 在 此 位 置 绘 制 ) 
squarePosition y += 1; 


//20 毫 秒 后 绘制 下 一 帧 
setTimeout (drawFrame, 20); 


} 

运行 这 个 例子 ， 就 会 看 到 一 个 方形 从 画布 上 方 不 断 下 落 ， 最 后 消失 在 画布 下 方 。 

如 果 动 画 更 复杂 ,计算 过 程 也 会 相应 复杂 。 比 如 ,要 模拟 重力 加 速度 , 或 者 模拟 方形 撞击 底 
边 后 反弹 。 但 “设置 计时 器 、 调 用 绘制 函数 和 重 绘 整 个 画布 ”这 个 基本 过 程 都 是 完全 相同 的 。 


9.4.2 ”多 物体 动画 


好 了 ,既然 都 介绍 了 动画 和 交互 绘制 画布 的 基本 知识 ， 下 面 我 们 就 更 进一步 ,把 这 些 知 识 综 
合 起 来 运用 到 一 个 例子 中 。 图 9-10 展 示 了 一 个 测试 页 面 ， 其 中 有 多 个 下 落 和 弹跳 的 球 。 这 个 例子 
使 用 了 上 一 节 用 到 的 setTimeout() 方 法 ， 而 此 次 绘制 代码 必须 支持 无 数 个 下 落 的 小 球 。 












































口 Animetion Es a D) Animation 他 一 图 9-10 在 这 个 测试 页 面 
€ CC Q Animation html a € GC Q Animationhtml a 中 可 以 添加 任意 多 个 球 





可 以 选择 球 的 大 小 ( 默认 
半径 为 15 像 素 ) ， 还 可 以 
打开 连 线 功 能 ( 右 图 ) 。 
添加 每 个 球 之 后 ， 这 个 球 
就 会 独立 运动 ， 加 速 向 下 
坠落 ， 直 至 磁 到 画布 底 边 
弹 回来 





























Add Bal | | Clear Canvas | Add Ball | | Clear Canvas | 


Ball Size: 15 语 Connect Balls | Ball Size:115 语 ¥ Connect Balls 





























提示 “静态 图 片 当 然 反映 不 出 动画 效果 了 。 要 尝试 一 下 图 9-10 所 示 的 动画 ,可 以 访问 http://prose- 
tech.com/html$ 。 





256 | 第 9 章 高 级 Canvas 技术 : 交互 性 和 动画 


动画 的 性 能 问题 
由 于 绘制 速度 很 快 ， 因 此 与 基本 的 绘图 操作 相 比 ， 动 画 对 画布 的 要 求 要 高 得 多 。 但 出 
人 意料 的 是 ,画布 并 没有 反应 迟钝 。 这 是 因为 现代 浏览 器 都 使 用 了 硬件 加 速 等 性 能 增强 技术 ， 
把 图 形 处 理工 作 转 移 给 了 显卡 ， 人 的 语言 ， 但 





仍然 可 以 利用 它 来 创造 出 复杂 、 高 速 的 动画 ， 其 至 是 实时 电子 游 只 要 有 脚本 和 画布 
即 可 。 

然而 ， 对 于 移动 设备 ( 比如 iPhone 或 Android 手 机 ) 来 说 ， 由 于 能 力 不 足 ， 0 
问题 了 。 测试 表明 ,在 桌面 浏览 器 中 运行 速度 达 每 秒 60 帧 的 动画 , 在 智能 手机 中 最 高 才能 达到 


每 秒 10 饥 。 因 此 ， 要 是 想 为 手 宙 用 户 开发 应 用 ， 一 定 要 尽早 测试 并 准备 晤 性 一 些 夺 人 眼目 的 动 
画 效 果 ， 从 而 确保 应 用 运行 流畅 。 


要 管理 图 9-10 中 这 些 球 ， 需 要 用 到 9.3.1 节 讨论 的 自 定 义 对 象 。 只 不 过 现在 需要 记录 很 多 球 对 
象 ， 而 每 个 球 对 象 不 仅 要 有 位 置 〈 属性 x 和 y )， 还 要 有 速度 〈 属 性 dx 和 dy ): 


// 下 面 就 是 用 于 表示 球 的 所 有 细节 的 Bal1 有 函数 
function Ball(x, y, dx, dy, radius) { 

this.x = x; 

this.y = y; 

this.dx = dx; 

this.dy = dy; 

this.radius = radius; 

this.color = "red"; 


} 


// 这 个 数组 用 于 保存 画布 上 出 现 的 所 有 球 
var balls = []; 














中 外 


注意 ”用 数学 书 里 的 说 法 ，dx 就 是 x 改变 的 速度 ， 而 dy 就 是 y 改 变 的 速度 。 因 此 ， 随 着 球 的 下 落 ， 
每 一 帧 x 都 会 增加 dx， 而 y 都 会 增加 dy。 





用 户 单 击 Add Ball 按 钮 后 , 儿 行 代码 会 执行 : 创建 一 个 新 的 bal1 对 象 并 将 其 保存 在 bal1s 数 组 EE 
中 ， 
function addBall() { 


// 取 得 用 户 设 定 的 大 小 
var radius = parseFloat(document.getElementById("ballSize").value); 





// 创 建新 的 ball 对 象 
var ball = new Ball(50,50,1,1,radius); 


// 将 其 保存 在 balls 数 组 中 
balls.push(ball); 
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Clear Canvas 按 钮 的 任务 恰恰 相反 一 一 清空 balls 数 组 : 
function clearBalls() { 


// 删 除 所 有 球 对 象 
balls = []; 


可 是 ,addBal1() 和 clearBalls() 函 数 实际 上 都 不 会 绘制 图 形 ; 它们 都 没有 调用 绘制 函数 。 实 








际 上 ， 调 用 drawFrame() 函 数 的 代码 会 在 页 面 加载 后 计时 执行 ， 每 隔 20 毫 秒 就 重 绘 一 次 画布 : 





Var canvas; 
var context; 


window.onload = function() { 
canvas = document.getElementById("canvas"); 
context = canvas.getContext("2d"); 


// 每 20 宫 秒 重 绘 一 次 
setTimeout (drawFrame, 20); 


3 
drawFrame() 函 数 是 这 个 例子 的 关键 所 在 , 它 不 仅 负 责 在 画布 上 绘制 所 有 球 , 而 且 还 要 计算 每 





























个 球 的 当前 位 置 和 速度 。 为 此 ，drawFrame() 函 数 使 用 了 一 些 计算 方法 模拟 真实 的 运动 。 比 如 ， 
坠落 时 加 速 ， 而 反弹 时 减速 。 下 面 就 来 看 看 它 的 完整 代码 : 





function drawFrame()  // 清 除 画 布 
context.clearRect(0, 0, canvas.width, canvas.height); 
context .beginpath(); 


// 循 环 所 有 球 
for(var i=0; i<balls.length; i++) { 
// 把 每 个 球 移动 到 新 位 置 
var ball = balls[i]; 
ball.x += ball.dx; 
ball.y += ball.dy; 


// 添 加 重力 作用 的 效果 ， 让 球 加 速 下 落 
if ((ball.y) < canvas.height) ball.dy += 0.22; 





// 添 加 摩擦 力作 用 的 效果 ， 减 慢 左 右 移 动 速 度 
ball.dx = ball.dx * 0.998; 


// 如 果 球 碰 到 某 一 边 ， 就 反弹 回来 

if ((ball.x + ball.radius > canvas.width) || (ball.x - ball.radius < 0)) { 
ball.dx = -ball.dx; 

} 


// 如 果 球 碰 到 底部 ， 反 弹 回 来 ， 但 慢 慢 地 减速 
if ((ball.y + ball.radius > canvas.height) || (ball.y - ball.radius < 0)) 


ball.dy = -ball.dy*0.96; 
} 
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// 检 测 用 户 是 否 选择 了 连 线 功能 

if (!document .getElementById("connectedBal1s") .checked) { 
Context .beginPath(); 
context.fillstyle = ball.fillColor; 

} 

else { 
context.fillStyle = "white"; 

} 


// 绘 制 球 

context.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2); 
context.lineWidth = 1; 

context .fill(); 

context.stroke(); 


} 
//20 毫 秒 后 绘制 下 一 帧 


setTimeout (drawFrame, 20); 


} 


提示 “如 果 有 读者 不 太 理解 计 语 名 的 作用 ， 不 太 清楚 ! 和 || 等 操作 符 的 意思 ， 可 以 参考 附录 B。 





一 下 子 看 到 这 么 多 代码 ,是 不 是 有 点 害怕 ? 别 紧 张 ， 整体 流程 并 没有 变 。 以 上 代码 执行 了 下 
列 任务 : 


(1) 清除 画布 ; 

(2) 循环 球 的 数组 ; 

(3) 调整 每 个 球 的 位 置 和 速度 ; 
(4) 绘制 每 个 球 ; 





(5) 调用 setTimeout() 以 便 每 隔 20 上 毫秒 就 执行 一 次 drawFrame() 也 数 。 

其 中 第 3 步 相 对 最 复杂 ， 因 为 球 的 属性 是 在 这 一 步 改变 的 。 根 据 要 实现 的 效果 ， 这 里 的 
代码 可 能 比 现在 还 要 复杂 很 多 倍 。 渐 进 地 、 自 然 地 运行 非常 难 模仿 ,因此 往往 需要 很 多 数学 
计算 。 

最 后 ， 既 然 每 个 球 的 状态 都 有 记录 ， 那 么 接 下 来 为 画布 添加 交互 功能 也 就 不 难 了 。 实 际 上 ， 
这 里 仍然 可 以 使 用 9.3.2 节 中 的 碰撞 检测 代码 ， 只 不 过 此 时 在 单 击 球 的 时 候 , 需要 以 其 他 方式 给 出 
响应 。 比 如 ， 可 以 让 被 单 击 的 球 突然 加 速 ， 让 它 向 某 个 方向 弹 开 。( 实现 这 种 响应 的 示例 页 面 从 
http://prosetech.com/html5 下 载 。) 

要 想 知 道 这 个 例子 做 到 极致 是 什么 样 的 ， 可 以 看 看 这 个 谷歌 弹跳 球 : http://tinyurl.com/ 
6byvnk5。 在 没有 鼠标 介入 的 情况 下 ， 这 些 球 就 像 有 磁性 一 样 拼 成 “Google” 字 样 。 在 鼠标 移动 
到 其 中 后 ， 小 球 像 是 受到 了 排斥 ， 向 画布 的 四 周 扩散 ， 然 后 不 规则 地 反弹 回来 。 如 果 看 了 这 个 例 
子 还 不 满足 ， 再 推荐 两 个 给 你 : 一 个 是 迟钝 的 水 滴 (http:/www. blobsallad.se )， 另 一 个 是 有 点 老 
套 的 星空 效果 (http://tinyurl.com/crn3ed )。 
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忙 人 《或 懒 人 ) 的 Canvas 动 画 

难道 所 有 计算 都 要 我 自己 费 脑子 吗 ? 

画布 最 大 的 缺点 就 是 一 切 都 需要 你 自己 费 脑子 。 比 如 , 要 想 让 一 张 图 片 从 画布 一 边 飞 到 另 
一 边 ， 你 得 自己 计算 图 片 在 每 一 帧 中 的 位 置 ， 然 后 再 在 该 位 置 上 绘制 图 片 。 而 如 果 同 时 要 以 不 
同方 式 为 不 同 的 东西 添加 动画 ， 那 么 代码 就 会 变 得 很 杂乱 。 相 对 而 言 ， 使 用 Flash 或 Silverlight 
的 程序 员 的 日 子 就 好 过 一 些 了 。 这 两 种 技术 都 内 置 了 动画 机 制 ， 开 发 人 员 只 要 给 出 类 似 “ 用 45 
秒 时 间 把 这 个 图 形 从 这 儿 移 动 到 那儿 ”之 类 的 指令 即 可 。 其 至 可 以 说 :“ 把 这 个 图 形 从 窗口 顶 
部 移动 到 底部 ， 要 加 速 下 落 ,， 反弹 时 应 该 温和 一 些 。” 

为 填补 这 个 空缺 ， 一 些 进 取 的 JavaScript 开 发 者 们 开始 创建 基于 Canvas 的 高 级 绘图 和 动画 
系统 。 使 用 这 些 JavaScript 库 ， 可 以 选择 想 要 的 效果 ， 而 不 必 费 尽心 机 地 算计 数字 。 有 什么 坑 
呢 ? 目前 至 少 有 6 个 高 质量 的 Canvas 动 画 框架 ， 每 个 都 有 其 独特 的 模式 和 一 些 奇 特 之 处 。 现 在 
还 说 不 好 这 些 发 展 中 的 工具 哪个 在 将 来 会 支持 得 最 好 ， 最 受 欢 迎 。 目 前 最 值得 推荐 的 的 框架 
有 : Fabric.js (http://fabricjs.com )、Paper.js (http://paperjs.org )、EaselJS ( www.createjs.com ) 
和 KineticJS ( http://kineticjs.com )。 可 以 在 http://tinyurl.com/canvas-libraries 查 看 开发 者 们 对 这 
些 库 的 最 新 评论 。 


9.5 实例 : 迷宫 游戏 


到 目前 为 止 ,我 们 已 经 学 习 了 针对 画布 编程 的 基本 技术 , 学习 了 画布 的 交互 功能 和 动画 效果 。 
运用 这 些 基本 的 技术 , 不 仅仅 能 绘图 , 而 且 可 以 实现 完整 的 应 用 ， 比 如 游戏 或 Flash 风 格 的 迷你 应 
用 等 。 

图 9-11 展 示 了 一 个 更 有 挑战 性 的 例子 ， 这 个 例子 利用 了 迄今 所 学 ， 包 括 两 个 概念 。 实 际 上 ， 
这 是 一 个 简单 的 游戏 ,让 用 户 引导 一 个 可 爱 的 小 笑脸 图 标 走出 迷宫 。 用 户 按 下 方向 键 时 ,笑脸 图 
标 会 沿 相应 方向 移动 ( 动画 )， 遇 到 墙 时 碰撞 检测 ) 就 会 停 下 来 。 

当然 ， 一 分 耕 未 一 分 收获 。 要 想 利用 画布 实现 这 种 高 级 应 用 ， 就 得 多 编写 很 多 代码 。 接 下 来 
的 几 节 会 详细 介绍 这 个 例子 的 开发 过 程 ， 不 过 在 此 之 前 ， 建 议 你 多 学 点 JavaScript 备 用 。 










































































注意 ”如果 你 使 用 I[E9， 可 以 在 本 地 计算 机 中 运行 这 个 例子 。 如 果 你 使 用 其 他 浏览 器 ， 那 么 只 
把 页 面 ( 和 其 中 用 到 的 图 像 ) 上 传 到 Web 服 务 器 才 行 。 为 节省 时 间 ， 也 可 以 到 
http:/prosetech.comy/htmlS 直 接 查 看 这 个 例子 。 
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hs ee 图 9-11: 引导 笑脸 走出 迷宫 。 对 于 用 
SS] C\HTML5\Chapter 07\Maze.html = x ? ~ Ay 或 这 一 > 
ea 户 来 说 ， 这 是 个 好 玩 的 游戏 。 对 于 
发 者 来 说 ， 可 以 借以 熟悉 HTML5 的 
Canvas 和 JavaScript 编 程 技 巧 
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9.5.1 布置 迷宫 


在 一 切 发 生 之 前 , 需要 在 页 面 中 设置 画布 。 当 然 可 以 手工 绘制 迷宫 的 线条 或 矩形 , 但 这 样 就 
需要 编写 很 多 代码 。 手 工 编写 这 些 代码 极其 烦琐 。 你 得 在 大 脑 中 想象 一 个 迷宫 ,然后 再 用 独立 的 
绘图 操作 绘制 每 一 堵 墙 。 要 是 你 真 打算 这 样 做 ， 应 该 使 用 能 够 自动 创建 绘图 代码 的 工具 。 例 如 ， 
可 以 在 Adobe Illustrator 里 绘图 ， 然 后 使 用 插件 导出 画布 代码 (参见 8.1.4 节 )。 

男 一 种 思路 是 选择 一 幅 迷 宫 图 片 ， 把 整 幅 图 绘制 到 画布 上 。 这 个 办 法 就 简单 多 了 ， 因 为 在 网 
上 可 以 找到 很 多 能 生成 迷宫 的 免费 页 面 。 找 到 某 个 页 面 后 ， 设 置 一 些 参 数 ( 如 迷宫 大 小 、 形 状 、 
颜色 、 密度 和 复杂 性 ), 页 面 就 能 创建 一 个 可 下 载 的 图 片 。( 想 试 试 ?用 谷歌 搜索 maze generator。 ) 

我 们 这 个 例子 使 用 迷宫 图 片 。 当 页 面 加 载 时 ， 它 会 取得 一 张 图 片 ( 名 为 maze.png )， 然 后 把 
它 绘 制 到 画布 上 。 以 下 就 是 实现 上 述 过 程 的 代码 : 

// 定 义 全 局 变量 ,保存 画布 及 绘图 上 下 文 


var canvas; 
var context; 

































































window.onload = function() { 
// 设 置 画布 
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canvas = document.getElementById("canvas"); 
context = canvas.getContext("2d"); 


// 绘 制 迷宫 背景 
drawMaze("maze.png", 268, 5); 


// 当 用 户 按 下 键 瘟 上 的 键 时 ， 运 行 processKey() 函数 
window.onkeydown = processkKey; 


3 


以 上 代码 并 没有 自己 绘制 迷宫 背景 ， 而 是 把 这 个 任务 交 给 了 男 一 个 名 为 drawMaze() 的 函数 。 


























绘制 迷宫 的 drawMaze() 函 数 : 


// 记 录 笑 脸 图 标的 当前 位 置 
var x = 0; 
var y = 0; 





function drawMaze(mazeFile, startingX, startingY) { 
// 加 载 迷宫 图 片 
imgMaze = new Image(); 
imgMaze.onload = function() { 
// 调 整 画 布 大 小 以 适应 迷宫 图 片 
canvas.width = imgMaze.width; 
canvas.height = imgMaze.height; 








// 绘 制 迷宫 
var imgFace = document.getElementById("face"); 
context.drawImage(imgMaze, 0,0); 


// 绘 制 笑脸 
x = startingX; 

y = startingY; 
context.drawImage(imgFace, x, y); 
context.stroke(); 


//10 毫 秒 后 绘制 下 一 帧 
setTimeout(drawFrame，10); 
】 


imgMaze.src = mazeFile; 


由 于 绘制 迷宫 的 是 一 个 独立 的 函数 ， 因 此 就 可 以 不 局 限于 只 绘制 一 个 迷宫 。 只 要 在 调用 
drawMaze() 时 传 信 迷宫 图 片 的 文件 名 以 及 笑脸 的 起 始 位 置 ， 就 可 以 加 载 任 何 迷 宫 图 片 。 下 面 就 





旧 
EE 


以 上 代码 使 用 了 9.1.1 节 介绍 的 两 步 绘制 图 像 的 方法 。 首先, 定义 一 个 处 理 图 片 onLoad 事 件 并 
在 图 片 加 载 完毕 后 绘制 迷宫 的 函数 。 其 次 ， 它 设置 了 图 片 对 象 的 src 属 性 ， 这 样 就 会 加 载 图 片 并 
在 加 载 完毕 后 触发 事件 处 理 函 数 。 与 从 隐藏 的 <img> 元 素 中 取出 图 片 相 比 ， 这 个 两 步 方法 稍微 复 














杂 那 么 一 点 ， 但 为 了 让 函数 足够 灵活 ， 可 以 加 载 任意 迷宫 图 片 ， 就 必须 采取 这 种 方法 。 








加 载 完 迷宫 图 片 后 ， 代 码 会 根据 图 片 大 小 调整 画布 的 大 小 ， 把 笑脸 图 标 放 到 正确 的 位 置 上 ， 


然后 绘制 笑脸 图 标 。 最 后 ， 调 用 setTimeout() 开 始 绘 制 动 画 帧 。 
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注意 我 们 的 试验 网 站 (http://prosetech.com/html5 ) 中 的 这 个 例子 还 要 复杂 一 些 ， 主 要 是 支持 
用 户 在 任何 时 候 加 载 新 的 迷宫 ， 即 使 笑脸 图 标 在 当前 迷宫 中 行进 期 间 也 可 以 。 为 此 ， 那 
个 例子 在 drawMaze() 函数 中 添加 了 一 些 代码 ， 用 于 停止 笑脸 图 标 ( 如 果 正 在 行进 的 话 )， 
终止 动画 进程 ， 然 后 重新 加 载 背 景 ， 重 新 开始 。 


9.5.2 ”让 笑脸 动 起 来 


在 用 户 按 下 键盘 上 的 方向 键 时 ， 笑 脸 开始 移动 。 比 如 ， 按 向 下 键 ， 笑 脸 就 会 一 直 向 下 移动 ， 
不 是 碰 到 障碍 或 用 户 又 按 了 其 他 方向 键 ， 就 不 会 停 下 来 。 

为 此 ， 我 们 在 代码 中 需要 使 用 两 个 全 局 变量 记录 笑脸 的 速度 。 换 句 话说， 就 是 记录 笑脸 在 x 
和 y 轴 方向 上 每 一 帧 要 移动 多 少 像素 。 这 两 个 变量 就 是 dx 和 dy， 与 上 一 节 弹 跳 球 例子 中 的 一 样 。 
区 别 在 于 ， 这 个 例子 不 会 用 到 数组 ， 因 为 只 有 一 个 笑脸 图 标 : 











var dx = 0; 

var dy = 

用 户 按 下 键盘 上 的 键 时 ， 画 布 就 会 调用 processKey() 函 数 。 然 后 ， 该 函数 检查 用 户 按 下 的 是 
不 是 方向 键 , 然后 据 以 调整 笑脸 的 速度 。 为 了 检测 方向 键 , 要 用 已 知 的 值 与 用 户 按 下 键 的 键 码 进 











行 比较 。 比 如 ，38 是 向 上 键 的 键 码 。processKey() 函 数 会 忽略 除 方 向 键 之 外 的 按键 : 


function processKey(e) { 
// 如 果 笑 脸 在 移动 ， 停 止 
dx = 0; 
dy = 0; 


// 按 下 了 向 上 键 向 上 移动 

if (e.keyCode == 38) { 
dy = -1; 

} 


// 按 下 了 向 下 键 , 向 下 移动 

if (e.keyCode == 40) { 
dy = 1; 

} 


// 按 下 了 向 左 键 向 左 移动 
if (e.keyCode == 37) { 
dx = -1; 


} 


// 按 下 了 向 右键 ， 向 右 移动 
if (e.keyCode == 39) { 
dx = 1; 
} 
3} 
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从 代码 中 可 见 ，processKey() 函数 并 不 改变 笑脸 的 当前 位 置 ， 也 没有 绘制 笑脸 。 在 调用 了 
drawFrame() 函 数 之 后 ， 每 隔 10 毫 秒 就 会 执行 一 次 这 种 检测 任务 。 
接 下 来 看 drawFrame() 函 数 ， 这 个 函数 的 代码 很 好 理解 ， 只 是 会 涉及 很 多 细节 。 这 个 函数 执 
行 几 个 任务 ， 首 先是 检测 笑脸 是 否 正在 哪个 方向 上 移动 。 如 果 不 是 ， 则 什么 也 不 必 做 : 
function drawFrame() { 
if (dx != 0 || dy != 0) { 
如 果 笑 脸 在 移动 ，drawFrame() 会 在 当前 笑脸 的 位 置 绘 制 一 块 黄色 背景 (用 于 创造 “痕迹 ” 
感 )， 然 后 把 笑脸 移动 到 下 一 个 位 置 : 
context .beginPath(); 
context.fillSstyle = "rgb(254,244,207)"; 


context.rect(x, y, 15, 15); 
context.fill() 


























// 增 大 位 置 值 
X += dx; 
y += dy; 


接 下 来 ,调用 checkForCollision() 函 数 ， 检 查 新 位 置 是 否 与 障碍 物 冲 突 。( 下 一 节 将 介绍 这 
个 碰撞 检测 函数 的 代码 。) 如 果 新 位 置 无 效 ， 说 明 笑 脸 碰 到 了 墙 ， 代码 必 须 将 其 放 回 上 一 位 置 并 
停止 移动 它 : 

if (checkForCollision()) { 














x -= dx; 

y -= dy; 

dx = 0; 

dy = 0; 
} 

















到 这 里 就 可 以 绘制 笑脸 了 ， 以 下 就 是 代码 : 


var imgFace = document.getElementById("face"); 
context.drawImage(imgFace, x, y); 


然后 ， 检 测 笑脸 是 否 到 已 经 达 迷 宫 底 部 〈 完 成 了 游戏 )。 如 果 是 ， 则 显示 一 个 消息 框 : 


if (y > (canvas.height - 17)) { 
alert("You win!"); 
return; 
} 
} 


如 果 没 有 ， 则 通过 setTimeout() 设 置 在 10 毫 秒 之 后 再 次 调用 drawFrame() 方 法 : 


//10 毫 秒 后 绘制 下 一 帧 
setTimeout(drawFrame，10); 


} 
除了 checkForCollision() 函 数 ,这 个 例子 的 代码 就 都 介绍 完了 。 下面 我 们 就 来 介绍 用 于 碰撞 
检测 的 创新 逻辑 。 
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9.5.3 ”基于 像素 颜色 的 碰撞 检测 

本 章 前 面 曾 讨论 过 基于 数学 计算 来 实现 碰撞 检测 。 除 此 之 外 , 还 有 另 一 种 手段 。 那 就 是 不 检 
测 已 经 绘制 了 哪些 对 象 ， 而 是 取得 像素 块 ， 检测 它 们 的 颜色 。 很 多 情况 下 ， 这 种 手段 更 简单 ， 因 
为 它 不 涉及 全 部 对 象 , 也 不 必 编 写 图 形 记录 代码 。 然而 , 这 种 手段 只 适合 能 明确 判断 颜色 的 场合 。 











注意 ， 对 于 迷 官 游戏 来 说 ， 基 于 像素 颜色 进行 碰撞 检测 是 最 理想 的 手段 。 利 用 像素 颜色 ， 可 以 
确定 笑脸 什么 时 候 磁 到 黑色 的 墙 。 如 果 不 使 用 这 种 技术 ， 那 么 就 必须 将 迷宫 的 信息 保存 
在 内 存 中 ， 然 后 再 确定 笑脸 的 当前 坐标 是 否 与 迷 官 中 的 菜 面 墙 重合 。 





能 够 基于 像素 颜色 进行 碰撞 检测 的 关键 , 就 在 于 画布 支持 对 个 别 像素 ( 也 就 是 组 成 每 张 图 片 
的 小 点 ) 的 操作 。 绘 图 上 下 文 为 操作 像素 提供 了 三 个 方法 : getImageData()、putImageData() 和 
createImageData()。 其 中 ，getImageData() 用 于 从 和 矩形 区 域 中 取得 一 个 像素 块 ， 然 后 再 检测 这 些 
像素 ( 我们 的 迷宫 游戏 中 使 用 了 这 个 方法 )。 可 以 修改 像素 使 用 putImageData() 并 将 它们 回 写 到 画 
布 。 最 后 ，createImageData() 用 于 在 内 存 中 创建 新 的 、 空 的 像素 块 ， 以 便 你 根据 自己 的 想法 自 定 
义 其 中 的 像素 ， 然 后 使 用 putImageData() 把 它们 回 写 到 画布 上 。 

为 了 深入 地 理解 这 几 个 操作 像素 的 方法 , 来 看 下 面 这 行 代码 。 这 行 代码 首先 从 当前 画布 上 取 
得 一 个 100 像 素 x 50 像 素 大 的 像素 块 ， 使 用 的 是 getImageData() 方 法 : 


// 取 得 像素 的 起 点 为 (0,0)， 向 右 拓 展 100 像 素 ， 向 下 拓展 50 像 素 
var ;imageData = context.getImageData(0, 0, 100, 50); 


然后 ， 再 通过 data 属 性 取得 一 个 包含 图 像 数据 的 数值 数组 : 

var pixels = imageData.data; 

可 能 有 读者 会 猜测 每 个 像素 都 用 数组 中 的 一 个 数值 表示 。 要 是 那么 简单 就 好 了 ! 实际 上 , 每 
个 像素 是 用 4 个 数值 来 表示 的 ， 前 三 个 分 别 表示 红 、 绿 、 蓝 ， 第 四 个 表示 不 透明 度 (alpha 值 )。 
因此 ， 要 检测 每 个 像素 ， 必 须 四 个 一 组 四 个 一 组 地 遍历 这 个 数组 ， 如 下 所 示 : 


// 遍 历 每 个 像素 ， 反 转 其 颜色 
for (var i = 0, n = pixels.length; i < n; i += 4) { 






























































// 取 得 每 个 像素 的 数据 
var red = pixels[i]; 
var green = pixels[i+1]; 
var blue = pixels[i+2]; 
var alpha = pixels[i+3]; 


// 反 转 颜 色 

pixels[i] = 255 - red; 
pixels[i+1] = 255 - green; 
pixels[i+2] = 255 - blue; 


} 
每 个 数值 的 范围 是 0~255。 上 面 的 代码 使 用 了 最 简单 的 图 像 操作 技术 一 一 反 转 颜色 。 如 果 反 
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转 的 是 一 张 照片 ， 那 么 结果 就 像 看 到 其 负片 一 样 。 

为 了 看 到 反 转 颜色 后 的 效果 , 可 以 把 修改 后 的 像素 回 写 到 画布 中 原来 的 位 置 上 ( 当然 , 绘制 
到 任何 地 方 都 易如反掌 ): 

context.putImageData(imageData, 0, 0); 

能 够 操作 每 个 像素 ， 当 然 为 我 们 控制 画布 提供 了 很 多 可 能 性 。 但 是 ,操作 像素 也 有 缺点 , 主 
要 是 操作 速度 慢 ， 而 且 一 般 画 布 中 包含 的 像素 数目 都 十 分 巨大 。 如 果 取 得 一 大 块 图 片 数 据 ,， 可 能 
就 需要 遍历 几 万 个 像素 。 如 果 你 觉得 画 直 线 或 画 曲 线 都 很 烦人 , 那么 手工 处 理 一 个 个 像素 只 会 更 
令 人 生 厌 。 

但 是 , 操作 像素 能 够 解决 其 他 手段 解决 不 了 的 问题 。 比 如 ,通过 像素 操作 可 以 方便 地 绘制 出 
分 形 图 像 ， 或 者 实现 Photoshop 风 格 的 图 片 滤 镜 。 而 在 我 们 的 迷宫 游戏 中 ， 通 过 像素 操作 可 以 用 
简单 的 代码 来 确定 笑脸 图 标的 走向 ,判断 它 是 否 磁 到 了 墙 。 以 下 就 是 处 理 这 个 任务 的 
checkForCollision() 函 数 的 代码 ; 


function checkForCollision() { 
// 取 得 笑脸 所 在 的 像素 块 ， 再 稍微 扩展 一 点 
var imgData = context.getImageData(x-1, y-1, 15+2, 15+2); 
var pixels = imgData.data; 

































































// 检 测 其 中 的 像素 
for (var i = 0; n = pixels.length, i < n; i += 4) { 
var red = pixels[i]; 
var green = pixels[i+1]; 
var blue = pixels[i+2]; 
var alpha = pixels[i+3]; 


// 检 测 黑色 的 墙 (如 果 检 测 到 了 ， 就 说 明 撞墙 了 ) 
if (red == 0 && green == 0 && blue == 0) { 
return true; 


} 


// 检 测 灰 色 的 边 〈 如 果 检 测 到 了 ， 就 说 明 撞墙 了 ) 
if (red == 169 8& green == 169 && blue == 169) { 
return true; 


} 


} 
// 没 有 碰 到 墙 
return false; 





这 样 , 我 们 迷宫 游戏 的 代码 就 全 部 介绍 完了 。 这 个 例子 是 本 书 到 目前 为 止 代码 最 长 的 一 个 例 
子 。 要 想 完 全 理解 它们 ， 狼 人 得 多 看 几 遍 ( 或 者 好 好 掌握 一 下 JavaScript )， 而 一 旦 你 看 懂 看 明白 
了 它们 ， 就 可 以 在 自己 的 画布 应 用 中 用 上 类 似 的 技术 了 。 

如 果 你 淘 求 更 多 的 Canvas 教 程 ， 可 能 需要 一 门 专门 介绍 这 个 主题 的 书 ， 比 如 HTML5 Canvas 
( Steve Fulton 和 Jeff Fulton 著 ) 或 者 Core HTML5 Canvas( David Geary 著 )。 每 本 书 都 可 以 带 你 深 
入 Canvas 绘 图 的 底层 细节 。 
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有 视觉 冲击 力 的 Canvas 应 用 示例 
利用 Canvas， 可 以 开发 出 不 计 其 数 的 应 用 形式 。 如 果 你 想 知 道 通过 HTML5 画 布 到 底 能 实 
现 多 么 神奇 的 效果 ， 可 以 在 网 上 找 。 下 面 也 给 出 几 个 网 站 ,在 其 中 可 以 发 现 一 些 令 人 目眩 的 画 
布 魔法 。 

口 Canvas Demos。 这 个 Canvas 示 例 网 站 中 的 内 容 足 以 让 人 流连 忘 返 。 本 书写 作 时 的 例子 
有 游戏 Mutant Zombie Masters《 突 变 僵 尸 大 师 》 和 股份 图 工具 TickerPlot。 不 说 了 ， 赶 紧 
看 吧 : http:/www.canvasdemos.com。 

口 维 基 知 识 地 图 。 这 个 令 人 难忘 的 画布 应 用 ， 以 图 形 方式 形象 地 展示 了 维基 百科 中 的 文 
章 。 不 同 主题 由 网 状 的 细 线 相连 。 选 择 其 中 一 个 主题 ， 就 可 以 进入 放大 的 知识 地 图 中 ， 
然后 流畅 的 动画 会 把 最 新 的 文章 展示 出 来 。 这 个 网 站 的 地 址 是 http://en.inforapid.org。 

口 3D Walker。 这 个 例子 展示 的 是 一 个 简单 的 3D 围 墙 和 通道 环境 ( 让 人 仿佛 置身 三 战 时 期 
的 德军 总 部 ， 当 然 是 指 那 款 1992 年 发 布 的 开 第 一 人 称 射击 游戏 先河 的 大 作 )。 想 试 一 试 
吗 ? 请 访问 http://www.benjoffe.com/code/demos/canvascape。 

口 国 际 象棋 。 这 是 一 个 HTML5 国 际 象棋 模拟 程序 ,你 可 以 跟 计算 机 对 弃 (上方 选手 )， 可 
以 使 用 三 维 视 角 , 取决 于 你 的 设置 。 要 挑战 自己 ? 来 吧 : http://htmlchess.sourceforge.net/ 
demo/example.html。 
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构建 Web 应 用 


数据 存储 
离线 应 用 
与 Web 服务 絮 通 信 


地 理 定位 、Web Worker 和 历史 管理 





数据 存储 








WUWW 
计算 机 )。 这 两 个 地 方 各 自 都 有 适合 保存 的 数据 。 

Web 服 务 器 适合 保存 敏感 信息 ， 以 及 那些 你 不 希望 被 别人 筑 改 的 数据 。 比 如 ， 在 网 上 书店 里 购 
书 时 ， 所 有 交易 信息 都 会 保存 到 Web 服 务 器 上 ， 比 如 图 书 类 别 、 历 史 消 费 记 录 以 及 其 他 任何 相关 信 
息 。 你 自己 计算 机 中 保存 的 数据 只 有 那么 一 丁点 儿 , 书店 网 站 要 用 该 数据 判断 你 是 谁 ， 这 样 才能 知 
道 哪 个 购物 车 是 你 的 。 即 使 有 了 HTML5 ， 这 种 套路 也 不 能 改变 一 一 服务 器 安全 、 可 靠 、 高 效 。 

然而 , 服务 器 端 存储 也 并 非 适 合 所 有 网 站 。 有 时候 ,把 一 些 不 太 重 要 的 信息 放 在 用 户 计算 机 
上 相对 会 更 方便 。 比 如 ， 把 用 户 偏好 (影响 网 页 显示 方式 的 设置 ) 和 应 用 状态 ( 相当 于 Web 应 用 
某 个 瞬间 的 快照 ,保存 后 可 以 方便 用 户 将 来 返回 该 状态 ) 放 在 用 户 本 地 就 比较 合乎 情理 。 如 果 从 
服务 端 获取 或 计算 数据 比较 耗 时 ， 可 以 通过 将 其 保存 在 用 户 本 地 来 提供 性 能 。 

在 HTML5 之 前 ， 本 地 存储 的 唯一 方案 就 是 使 用 cookie。 而 最 初 发 明 cookie 的 目的 ， 是 为 了 在 
浏览 器 和 服务 器 之 间 传 送 身份 信息 。 利 用 cookie 保 存 少 量 数据 绝对 方便 ， 可 是 操作 它们 的 
JavaScript 语 法 多 少 有 点 不 够 人 性 化 。 但 cookie 也 有 不 好 的 一 面 ， 那 就 是 必须 处理 过 期 数据 ， 而 且 
要 跟着 每 一 次 请 求 来 来 回回 地 发 送 和 接收 这 些 没 有 用 的 数据 。 

HTML5 新 增 了 更 好 的 本 地 存储 功能 ， 让 我 们 在 访客 的 计算 机 上 保存 数据 更 加 方便 。 这 些 数 
据 可 以 无 限期 地 保存 在 用 户 计算 机 上 ， 不 会 发 送 到 服务 器 〈 除非 你 自己 发 送 )， 有 充裕 的 空间 存 
储 它们 ， 而 且 能 够 通过 几 个 简单 的 JavaScript 对 象 对 它们 进行 操作 。 这 个 叫 作 Web 存 储 (Web 
Storage ) 的 新 功能 特别 适合 开发 离线 应 用 ( 离线 应 用 将 在 第 11 章 讨论 )。 离线 应 用 的 数据 可 以 “ 自 
给 自足 ”， 无 论 用户 能 否 上 网 ， 都 可 以 在 本 地 保存 用 户 信息 。 

本 章 将 带领 大 家 探索 Web 存 储 功能 的 各 个 方面 。 另 外 ， 还 会 介绍 两 个 更 新 的 标准 : File APL， 
支持 该 标准 的 浏览 器 能 够 从 计算 机 硬盘 的 其 他 文件 中 读 取 数据 ; IndexDB， 支 持 该 标准 的 浏览 器 
内 含 一 个 完整 的 、 微 型 的 数据 库 引 擎 。 





























10.1 Web 存储 简介 


HTML5 的 这 个 Web 存 储 功 能 ， 其 实 就 是 让 网 页 在 用 户 计 算 机 上 保存 一 些 信息 。 这 些 信息 可 以 是 
临时 的 (浏览 器 一 关 , 就 自动 删除 ), 也 可 以 是 长 期 的 (多 少 天 之 后 再 打开 网 站 , 仍然 可 以 访问 它们 )。 
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注意 ”Web 存储 这 个 名 字 误 人 不 浅 啊 ,本 来 网 页 保存 的 信息 根本 就 不 在 Web ( 网) 上 ， 而 是 实 
实在 在 地 保存 在 用 户 的 计算 机 上 ， 从 来 不 会 离开 。 


Web 存 储 又 分 两 种 ， 分 别 对 应 两 个 JavaScript 对 象 。 

口 本 地 存储 ， 对 应 localSstorage 对 象 , 用 于 长 期 保存 网 站 的 数据 ,并且 站 内 任何 页 面 都 可 访 
问 该 数据 。 也 就 是 说 ， 如 果 有 一 个 网 页 利用 本 地 存储 保存 了 数据 ， 那 么 访客 在 一 天 后 、 
一 星期 后 ， 甚 至 一 年 之 后 再 上 线 ， 该 数据 仍然 还 会 在 那儿 。 当 然 ， 多 数 浏 览 器 都 会 提供 
一 种 机 制 ， 让 用 户 可 以 清除 本 地 存储 空间 中 的 数据 。 有 些 浏览 器 只 提供 一 个 命令 ， 要 么 
一 点 不 能 删 ， 要 删 就 全 都 删除 ， 就 跟 过 去 清除 cookie 的 方法 一 样 。( 事实 上 ， 某 些 浏览 顺 
的 实现 是 将 本 地 存储 和 cookie 放 在 一 起 的 , 因此 要 清除 本 地 存储 数据 必须 清除 cookie。) 另 
一 些 浏览 器 会 让 用 户 按 照 站 点 检查 数据 ， 然 后 有 选择 地 清除 本 地 存储 的 数据 。 

口 会 话 存储 ， 对 应 sessionStorage 对 象 ， 用 于 临时 保存 针对 一 个 窗口 (或 标签 页 ) 的 数据 。 
在 访客 关闭 窗口 或 标签 页 之 前 ， 这 些 数据 是 存在 的 ， 而 关闭 之 后 就 会 被 浏览 器 删除 。 不 
过 ， 只 要 用 户 不 关闭 窗口 或 标签 页 ， 就 算 他 从 你 的 网 站 跑 到 人 家 的 网 站 然后 又 回来 ， 这 
些 数据 还 会 在 。 
































提示 “从 页 面 代码 的 角度 说 ， 本 地 存储 和 会 话 存储 的 操作 完全 相同 。 它 们 的 区 别 仅 在 于 数据 的 寿 
命 。 本 地 存储 主要 用 于 保存 访客 将 来 还 能 看 到 的 数据 ， 而 会 话 存储 则 用 于 保存 那些 需要 从 
一 个 页 面 传递 给 下 一 个 页 面 的 数据 。( 当然 ,使 用 会 话 存储 也 可 以 保存 只 在 一 个 页 面 中 使 用 
的 数据 ， 但 这 个 任务 就 算 普 通 的 JavaScript 变 量 也 绝对 可 以 胜任 ， 又 何必 多 此 一 举 呢 。) 





无 论 本 地 存储 还 是 会 话 存储 ， 都 是 与 网 站 所 在 的 域 联系 在 一 起 的 。 换 句 话 说， 如 果 利 用 本 地 存 
储 保存 数据 的 页 面 是 www.GoatsCanFloat.org/game/zapper.html， 那 么 男 一 个 页 面 www.GoatsCanFloat. 
org/contact.html 也 可 以 访问 该 数据 ， 因 为 这 两 个 页 面 在 同一 个 域 中 (www.GoatsCanFloat.org )。 如 
果 是 另 一 个 不 同 网 站 的 页 面 ， 就 不 能 访问 该 数据 了 。 

同样 ， 由 于 数据 保存 在 用 户 的 计算 机 上 (或 移动 设备 上 )， 这 些 数 据 也 是 跟 计 算 机 绑 定 的 ; 
网 页 不 能 访问 保存 在 其 他 用 户 计算 机 上 的 数据 。 类 似 地 ,如 果 你 用 不 同 的 用 户 名 登录 自己 的 计算 
机 ， 或 者 使 用 不 同 的 浏览 器 ， 那 么 存 取 的 也 将 是 不 同 的 本 地 存储 数据 。 











注意 尽管 HTML5 没 有 硬性 规定 存储 空间 的 上 限 ， 但 大 多 数 浏览 器 都 把 本 地 存储 限制 为 5 MB 
以 下 。 这 已 经 足够 保存 很 多 数据 了 ,但 如 果 你 想 利 用 本 地 存储 来 缓存 大 图 片 或 视频 文件 ， 
恐怕 这 个 限制 会 让 你 捉襟见肘 ( 毕竟， 这 也 不 是 设计 本 地 存储 的 目的 ),。 假如 你 需要 更 大 
的 空间 ， 可 以 考虑 尚未 定案 的 IndexedDB 数 据 库 标准 (参见 10.4 节 的 附注 栏 ) 一 一 用 户 同 
意 的 前 提 下 可 以 达到 几 百 兆 。 
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10.1.1 存储 数据 














要 把 一 段 信息 保存 到 本 地 存储 或 会 话 存储 中 , 首先 要 为 该 信息 想 一 个 名 字 。 这 个 名 字 叫 作 键 ， 











将 来 要 通过 它 来 取 回 数据 。 








要 保存 数据 ， 需 使 用 localstorage.setItem() 方 法 : 
localStorage.setItem(keyName, data); 

举 个 例子 ,假设 你 想 保 存 用户 名 ， 那 么 这 个 键 就 可 以 叫 作 user_name: 
localStorage.setItem("user name", "Marky Mark"); 


当然 , 像 这 样 保存 硬 编码 的 数据 没有 多 大 意思 。 更 多 情况 下 ， 可 以 保存 动态 数据 ， 比 如 当前 


























日 期 、 数 学 计算 的 结果 , 或 者 用 户 在 文本 框 中 输入 的 某 些 文本 ,等 等 。 下 面 就 是 一 个 保存 动态 数 
据 的 例子 : 


// 取 得 文本 框 
var nameInput = document.getElementById("userName"); 


// 保 存 文本 框 中 的 文本 


localStorage.setItem("user name", nameInput.value); 


读 取 本 地 存储 中 的 数据 跟 保 存 数 据 一 样 简单 ， 只 需 使 用 localStorage.getItem() 方 法 。 例如 ， 


下 面 这 行 代码 会 读 出 前 面 保存 的 用 户 名 ， 然 后 通过 警告 框 显示 出 来 : 


alert("You stored: " + localStorage. ne. 


无 论 这 个 名 字 是 5 秒 钟 前 保存 的 ， 还 是 5 个 月 前 保存 的 ， 这 行 代码 都 管用 。 
当然 ,有 可 能 这 个 键 下 面 尚未 保存 任何 数据 。 要 检测 某 个 键 的 值 是 否 为 空 ， 可 以 直接 测试 它 

















是 否 等 于 nul1。 请 看 下 面 的 例子 : 


if (localStorage.getItem("user name") == null) { 
alert ("You haven't entered a name yet."); 


else { 
// 把 用 户 名 放 到 文本 框 中 
document .getElementById("userName").value = localStorage.getItem("user name"); 

















会 话 存储 也 一 样 简单 .唯一 的 区 别 是 要 使 用 sessionstorage 对 象 , 而 不 是 localStorage 对 象 : 
// 取 得 当前 日 期 


var today = new Date(); 


// 以 文本 形式 保存 格式 为 HH:mm 的 时 间 
var time = today.getHours() + ":" + today.getMinutes(); 
sessionStorage.setItem("lastUpdateTime", time); 


图 10-1 展 示 了 一 个 页 面 ， 利 用 了 刚才 介绍 的 这 些 概念 。 
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| 图 10-1: 页 面 中 有 两 个 文本 框 ， 一 













































































和 从 WebStorage.html L D3Xx 个 针对 会 话 存储 ， 另 一 个 针对 本 地 
A 存储 。 单 击 Save Data， 页 面 会 保存 

This goes into local 方 杠 中 的 直 。 再 单 击 Load Data, 义 
a 会 把 刚才 保存 的 数据 读 来 。 要 测 

This goes into 试 这 个 页 面 ( 同 时 验证 会 话 存 储 中 
i 的 数据 会 在 关闭 窗口 后 消失 ， 而 本 

mes 地 存储 中 的 数据 则 会 长 期 存在 ) ， 
se 可 以 运行 http://prosetech.com/html5 
= 中 的 这 个 页 面 











注意 ”Web 存储 还 支持 两 种 读 写 数据 的 语法 。 除 了 前 面 介 绍 的 getItem() 和 setItem()， 还 可 以 使 
用 属性 名 或 索引 方式 。 用 属性 名 时 ， 读 取 名 为 user_name 的 数据 段 的 方式 为 1ocalStorage. 
user_name; 用 索引 方式 时 ， 读 取 这 个 数据 段 的 方式 为 localStorage[ "user_name"]。 可 以 
根据 个 人 喜好 选择 读 写 语法 ,但 大 多 数 Web 专 家 认为 getItem() 和 setItem() 最 好 ， 因 为 歧 
义 最 少 。 


没有 Web 服 务 器 则 不 能 使 用 Web 存 储 

在 测试 Web 存储 时 ， 可 能 会 遇 到 一 个 意 想不到 的 问题 。 在 很 多 浏览 器 中 ， 只 有 从 Web 服 
务 器 上 打开 的 页 面 才能 读 写 Web 存储 。 无 论 这 个 Web 服务 器 是 远程 的 还 是 本 地 的 一 一 关键 就 
是 不 能 从 本 地 硬盘 打开 页 面 。 

这 个 问题 的 根源 在 于 浏览 器 要 限制 Web 存储 的 空间 大 小 。 如 前 所 述 ， 每 个 网 站 的 存储 
上 限 是 5 MB。 为 了 达到 这 一 目的 ， 就 必须 把 每 个 使 用 本 地 存储 的 页 面 与 一 个 网 站 ( 域 ) 关 
联 起 来 。 

那 如 果 我 就 是 从 本 地 硬盘 打开 一 个 使 用 Web 存储 的 页 面 ， 结 果 会 怎么 样 ? 结果 要 视 情 况 
而 定 。 在 Internet Explorer 中 ,浏览 器 好 像 会 完全 不 支持 Web 存储 功能 一 样 。 因 为 , localStorage 
和 sessionStorage 对 象 不 见 了 ,访问 它们 的 JavaScript 代码 会 报错 ,在 Firefox 中 ,localStorage 
和 sessionStorage 对 象 还 在 ， 似 乎 还 支持 Web 存储 (即使 Modernizr 也 会 认为 支持 )， 但 任何 
读 写 操作 都 会 静默 地 失败 。 而 在 Chrome 中 ,结果 又 不 一 样 一 一 大 多 数 Web 存储 的 功能 一 如 既 
往 ， 只 有 少数 功能 (如 onStorage 事件 ) 无 效 。 在 使 用 File API 的 时 候 (10.3 节 会 介绍 )， 也 会 
遇 到 类 似 的 问题 。 因 此 ， 在 测试 之 前 最 好 先 把 页 面 放 到 你 自己 的 Web 服务 器 中 ， 从 而 避免 意 
外 发 生 。 要 不 ， 直 接 运行 http://prosetech.com/html5 中 的 页 面 也 可 以 。 
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10.1.2 ”实战 : 保存 游戏 中 的 最 后 位 置 


此 时 此 刻 ， 或许 你 会 想 : Web 存 储 不 过 如 此 啊 ， 也 就 是 能 用 方 括号 语法 记录 人 名 而 已 。 你 说 
的 没 错 。 但 Web 存 储 还 有 更 实际 的 用 途 ， 而 且 照 样 不 必 多 费力 气 。 

以 我 们 第 9 章 讲 画布 时 介绍 的 迷宫 游戏 为 例 ( 见 9.5 节 )。 要 想 一 次 就 走出 迷宫 并 不 容易 ， 所 
以 有 必要 在 用 户 关闭 窗口 或 打开 新 页 面 时 记录 当前 位 置 。 这样 ,用户 再 回来 迷宫 页 面 后 ,就 可 以 
把 笑脸 图 标 放 在 上 一 次 的 位 置 上 。 

要 实现 这 个 功能 ， 有 几 种 方案 可 以 选择 。 可 以 每 移动 一 次 就 保存 一 次 新 位 置 。 本 地 存储 的 速 
度 非常 快 ， 因 此 这 样 做 没有 问题 。 或 者 ， 可 以 响应 页 面 的 onBeforeUnload 事 件 ， 询 问 游戏 玩家 是 
否 要 保存 当前 位 置 ( 如 图 10-2 所 示 )。 






























































图 10-2:， 在 玩家 因为 要 打开 新 页 面 或 关 
闭 窗 口 而 离开 当前 页 面 时 ， 页 面 建议 保 
存 当 前 位 置 


| Canvas Maze Game ED 


€ 3 CC Qlocalhost/Mazeht > 



































@® The page at localhost says: 





Do you want to save your current posit 
ne time? 






































以 下 就 是 实现 页 面 建议 保存 位 置 的 代码 : 


window.onbeforeunload = function(e) { 
// 检 测 localStorage 对 象 是 否 存 在 
// (如 果 浏 览 器 不 支持 Neb 存 储 ， 还 怎么 保存 ? ) 
if (localStorage) { 








// 询 问 是 否 保存 位 置 
if (confirm( 
"Do you want to save your current position in the maze, for next time?")) { 
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// 保 存 两 个 坐标 值 
localStorage.setItem("mazeGame_CUTTentX"，X); 
localStorage.setItem("mazeGame_ currentY", y); 
} 
} 
} 


提示 。 建议 你 也 像 这 个 例子 一 样 选择 长 键 名 ， 如 mazeGame_currentX。 因 为 必须 保证 键 名 的 唯一 性 ， 
这 样 网 站 的 两 个 页 面 就 不 会 意外 地 使 用 同一 个 键 保存 不 同 的 数据 。 在 只 有 一 个 存储 空间 的 
系统 中 ， 很 容易 发 生命 名 冲突 ， 而 这 也 正 是 Web 存 储 的 一 个 弱点 。 为 了 避免 这 个 问题 ， 最 
好 提前 做 个 规划 ， 选 择 一 种 有 逻辑 性 、 能 自 解释 的 键 名 命名 方案 。 例 如 ， 假 设 另 一 个 页 面 
也 有 一 个 迷宫 游戏 ， 那 么 可 以 考虑 将 页 面 名 也 放 到 键 名 中 ， 比 如 Maze01_currentX。 





这 个 例子 展示 了 如 何 保存 应 用 状态 ( 当前 的 位 置 ) 。 如 果 你 不 想 让 用 户 每 次 离开 游戏 页 面 都 
看 到 同样 的 提示 消息 ,可 以 添加 一 个 “自动 保存 位 置 ” 复 选 框 。 然 后 ， 只 要 用 户 勾 选 复 选 框 就 保 
存 位 置信 息 。 当 然 ， 你 还 得 多 保存 一 个 复 选 框 的 值 ， 而 这 也 就 是 保存 应 用 偏好 的 例子 了 。 
这 样 ， 当 下 次 再 打开 迷宫 游戏 页 面 时 ， 就 可 以 检查 是 否 有 之 前 保存 的 位 置 : 
// 支 持 本 地 存储 功能 吗 ? 
if (localStorage) { 
// 取 得 数据 


var savedX = localStorage.getItem("mazeGame currentX"); 
var savedY = localStorage.getItem("mazeGame currentY"); 




















// 如 果 变 量 为 nul1， 则 说 明 没有 保存 的 数据 
// 否 则 ， 用 保存 的 数据 设置 新 坐标 
if (savedX != null) x = Number(savedX); 
if (savedY != null) y = Number(savedY); 
} 
这 个 例子 使 用 了 JavaScript 的 Number() 函 数 ， 用 于 把 保存 的 数据 转换 为 有 效 的 数值 。10.2.3 节 
会 进一步 介绍 这 样 做 的 必要 性 。 


10.1.3 浏览 器 对 Web 存 储 的 支持 情况 


Web 存 储 是 现代 浏览 器 支持 情况 最 好 的 HTMLS 功 能 之 一 。 你 能 找到 的 不 支持 Web 存 储 的 可 
能 就 只 有 IE7 了 ， 好 在 它 就 要 消失 在 历史 的 长 河中 了 。 

如 果 需 要 兼容 IE7， 可 以 用 cookie 来 模拟 Web 存 储 。 虽 然 不 完美 ,但 却 可 行 。 虽 然 没 有 官方 的 
脚本 可 以 帮 你 实现 模拟 ,但 在 GitHub 页 面 http://tinyurl.com/polyfil 的 “Web Storage” 部 分 ， 还 是 
可 以 找到 不 少 有 用 的 东西 。 

我 们 将 在 10.2.5 节 介绍 onStorage 事 件 ， 这 个 Web 存 储 功 能 没有 得 到 广泛 的 支持 。 尤 其 是 IE8， 
支持 Web 存 储 却 不 支持 onStorage 事 件 (IE9 及 其 之 后 的 版 本 修复 了 这 个 问题 , 全 面 支持 Web 存 储 )。 
可 以 用 onstorage 添 加 一 个 不 太 重 要 的 功能 ， 但 最 好 不 要 。 
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10.2 深入 Web 存储 


现在 我 们 已 经 掌握 了 Web 存 储 的 基础 知识 ， 包 括 保存 和 读 取 数 据 。 可 是 ， 在 学 以 致 用 之 前 ， 
还 有 一 些 重要 的 知识 点 以 及 有 用 的 技术 需要 再 掌握 一 下 。 接 下 来 的 几 节 会 介绍 怎么 从 Web 存 储 中 
删除 数据 项 ， 怎 么 检索 当前 保存 的 所 有 数据 。 另 外 ,还 会 介绍 如 何 处 理 不 同 的 数据 类 型 、 保 存 自 
定义 对 象 和 响应 存储 数据 变化 。 


10.2.1 删除 数据 项 


这 个 任务 已 经 简单 得 不 可 能 再 简单 了 。 只 要 调用 removeItem() 方 法 ， 传 人 键 名 ， 就 可 以 删除 
不 想 要 的 数据 项 : 

localStorage.removeItem("user_ name"); 

要 不 然 ， 就 调用 更 厉害 的 clear() 方 法 ， 清 空 网 站 在 本 地 保存 的 会 话 数据 ; 


sessionStorage.clear(); 
































10.2.2 ”查找 所 有 数据 项 


要 搜索 某 一 个 数据 项 ， 只 要 知道 键 名 即 可 。 但 这 里 会 再 告诉 你 一 个 更 有 意思 的 技巧 : 不 必 知 
道 任 何 键 名 ， 使 用 key() 方 法 从 本 地 或 会 话 存储 中 取得 ( 当前 网 站 保存 的 ) 所 有 数据 项 。 这 个 技 
巧 非常 适合 调试 排 错 。 当 然 如 果 你 想 知 道 其 他 页 面 都 保存 了 哪些 数据 , 或 者 都 使 用 了 什么 样 的 键 
名 ， 也 可 以 使 用 它 。 

图 10-3 展 示 了 一 个 实际 使 用 这 个 技巧 的 例子 。 
























































[sse 一 | 车 [E 必 | 图 10-3: 单 击 按钮 , 页 面 中 就 会 列 出 本 地 存储 中 的 
| Find Allltems = 数据 
\€) | http://localhost/FindAlltems.html ~ ed 合 四 - 











| Dump the contents of Local gees 


$ user name: Fabulous Bob 

$ mazeGame currentY: 5 

® save_position automatically: true 
® mazeGame currentX: 268 





























在 这 个 例子 中 ， 单 击 按钮 会 执行 findAllTtems() 函 数 ， 该 函数 会 遍历 本 地 存储 中 的 所 有 数据 
项 ， 其 代码 如 下 : 
function findAllItems() { 
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// 取 得 用 于 保存 数据 项 的 <ulL> 元 素 
var itemList = document.getElementById("itemList"); 


// 清 除 列表 


itemList.innerHTML = 


nn 
了 


// 遍 历 所 有 数据 项 

for (var i=0; i<localStorage.length; i++) { 
// 取 得 当前 位 置 数据 项 的 键 
var key = localStorage.key(i); 


// 取 得 以 该 键 保存 的 数据 值 
var item = localStorage.getItem(key); 


// 用 以 上 数据 创建 一 个 列表 项 

// 添 加 到 页 面 中 

var newItem = document.createElement("1i"); 
newItem.innerHTML = key + ": ”+ item; 
itemList.appendChild(newItem); 


10.2.3 ”保存 数值 和 日 期 


到 目前 为 止 ， 我们 还 遗漏 了 关于 Web 存 储 的 一 个 重要 细节 。 那 就 是 在 通过 localStorage 和 
sessionStorage 保 存 数据 时 ， 该 数据 会 自动 被 转换 为 文本 字符 串 。 对 于 本 来 就 是 文本 的 数据 〈 如 
在 文本 框 中 输入 的 用 户 名 )， 这 当然 没 问题 。 但 数值 就 不 一 样 了 。 比 如 10.1.2 节 的 那个 例子 ， 保 存 
的 就 是 迷宫 当前 的 位 置信 息 。 如 有 果 忘 了 把 文本 转换 成 数值 ， 那 么 就 会 碰 到 下 面 所 示 的 问题 : 

// 取 得 Xx 坐标 


// 假 设 保存 为 文本 35 
x = localStorage.getItem("mazeGame_ currentX"); 


























// 给 坐标 加 上 一 个 数值 
// 然 而 ，]avaScTipt 会 把 "35"+"5" 转 换 成 "355” 
xX += 5; 


不 幸 的 是 , 代码 的 运行 结果 并 不 是 我 们 想 要 的 。 因 为 x 是 个 字符 串 ，JavaScript 也 把 5 转化 为 字 
符 串 了 ， 所 以 实际 运行 的 是 "35"+ "5"， 结 果 为 355， 而 不 是 35+5。 事 实 上 ， 这 段 代 码 会 让 小 笑脸 
跳 到 完全 错误 的 位 置 ， 或 者 跳出 迷宫 。 

问题 在 于 ，JavaScript 认 为 你 是 想 把 两 段 文 本 拼 起 来 , 而 不 是 要 执行 数学 计算 。 要 解决 这 个 问 
题 , 就 需要 给 JavaScript 一 个 提示 , 告诉 它 你 想 计算 两 个 数值 的 加 法 。 办 法 有 很 多 , 但 使 用 Number() 
函数 就 很 好 : 


x = Number(localStorage.getItem("mazeGame currentX")); 









































// 这 样 ，]avaScTipt 就 可 以 正确 地 计算 35+5， 返 回 40 
Xx += 10; 
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文本 和 数值 还 算 容易 处 理 的 。 如 果 你 想 在 Web 存 储 中 保存 其 他 类 型 的 数据 ， 就 要 多 加 留意 。 
有 些 数据 类 型 有 方便 的 转换 方法 。 比 如 ， 像 下 面 这 样 保存 日 期 ; 

var today = new Date(); 

结果 并 不 会 保存 日 期 对 象 ， 而 是 会 保存 一 个 文本 字符 串 。 比 如 “Sat Jun 07 2014 13:30:46”。 
可 是 ,要 把 这 样 的 文本 转换 回 日 期 对 象 可 不 容易 。 若 没有 日 期 对 象 , 也 就 不 能 以 相同 方式 来 操作 
日 期 ， 比 如 不 能 调用 日 期 对 象 的 方法 执行 日 期 计算 。 

为 解决 这 个 问题 , 可 以 先 按照 既定 的 格式 把 日 期 转换 成 相应 的 文本 , 然后 再 根据 取得 的 文本 
创建 日 期 对 象 。 下 面 就 是 一 个 例子 : 


// 创 建 日 期 对 象 
var today = new Date(); 
































// 按 照 YYYY/MM/DD 的 标准 格式 把 日 期 转换 成 文本 字符 事 

// 然 后 保存 为 文本 

var todayString = today.getFullYear() + "/" + 
today.getMonth() + "/" + today.getDate(); 
sessionStorage.setItem("session started", todaystring); 


// 取 得 日 期 文本 ， 并 基于 该 文本 创建 新 的 日 期 对 象 
// 这 是 因为 文本 格式 是 有 效 的 日 期 形式 


today = new Date(sessionStorage.getItem("session started")); 


// 使 用 日 期 对 象 的 方法 ， 比 如 getFullYear() 
alert(today.getFullYear()); 


运行 以 上 代码 ,会 弹出 一 个 显示 年 份 的 消息 框 ， 也 就 说 明 你 重新 创建 了 日 期 对 象 。 


10.2.4 保存 对 象 


上 一 节 介 绍 了 在 Web 存 储 中 保存 数值 和 日 期 时 会 把 它们 转换 成 文本 ， 而 将 来 使 用 时 还 要 再 转 
换 回 去 。 这 些 转换 都 有 JavaScript 函 数 的 帮助 ， 首 先是 Number() 机 数 ， 然 后 是 文本 到 日 期 转换 时 的 一 
些 技巧 ， 依 靠 日 期 对 象 固有 的 方法 。 然 而 ， 还 有 很 多 其 他 对 象 不 能 这 样 转换 ， 尤 其 是 自 定 义 对 象 。 

比如 9.2.4 节 的 人 格 测试 , 那个 例子 使 用 了 两 个 页 面 。 测 试 者 在 第 一 个 页 面 回答 问题 然后 得 到 
一 个 分 数 ， 而 第 二 页 会 显示 测试 结果 。 当 时 为 在 两 个 页 面 间 传 递 数据 , 使 用 了 骨 入 在 URL 中 的 查 
询 字符 串 参 数 。 这 是 传统 HTML 中 的 做 法 〈 当然 使 用 传统 的 cookie 也 可 以 ) 但 有 了 HTML5， 利 
用 本 地 存储 共享 数据 才 是 最 佳 方案 。 

可 是 也 有 一 个 难题 。 测 试 数据 包含 5 个 数据 ， 分 别 对 应 五 个 人 格 因素 。 当 然 ， 可 以 分 别 保存 
这 5 个 数值 ， 但 要 是 能 把 所 有 人 格 因素 保存 到 一 个 自 定 义 对 象 中 ， 岂 不 更 简单 明了 ? 为 此 我 们 可 
以 定义 一 个 PersonalityScore 对 象 : 


function PersonalityScore(o，c，e，a n) { 
this.openness = 0; 
this.conscientiousness = Cc; 
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this.extraversion = e; 
this.agreeableness = a; 
this.neuroticism = n; 


} 

定义 了 PersonalityScore 对 象 之 后 ,只 要 1 个 数据 项 ( 而 非 5 个 ) 就 可 以 保存 所 有 数据 。( 关于 
自 定义 对 象 ， 参 见 附录 B。 ) 

为 了 把 自 定 义 对 象 保存 到 Web 存 储 中 ， 必 须 先 把 对 象 转换 成 文本 形式 。 要 自己 写 转换 代码 ， 
那 腑 烦 可 就 大 了 。 好 在 JavaScript 有 一 个 更 简单 的 、 标 准 化 的 机 制 叫 JSON 编 码 。 

JSON (JavaScript Object Notation ，JavaScript 对 象 表 示 法 ) 是 把 结构 化 数据 一 一 类 似 封装 在 
对 象 中 的 那些 值 一 一 转换 为 文本 的 一 种 简便 格式 。 而 且 浏 览 需 原 生 文 持 JSON 编 码 。 也 就 是 说 ， 
直接 调用 JSON.stringify()， 就 可 以 把 任何 对 象 连同 其 数据 转换 为 文本 形式 。 调 用 ]SON.parse() 
则 可 以 把 文本 转换 回 对 象 。 以 下 就 是 在 测试 中 转换 PersonalityScore 对 象 的 代码 。 在 测试 者 提交 
答案 时 ， 页 面 会 计算 分 数 (但 不 显示 )， 创 建 对 象 ， 保 存 它 ， 然 后 再 打开 新 页 面 : 


// 创 建 PerfsonalityScore 对 象 
Var score = new PersonalityScore(o, c, e, a, nN); 






































// 将 其 保存 为 方便 的 JSON 格 式 


sessionStorage.setItem("personalityScore", JSON.stringify(score)); 


// 转 到 结果 页 
window.location = "PersonalityTest Score.html"; 


到 新 页 面 后 , 再 从 会 话 存 储 中 取出 JSON 文 本 , 使 用 ]SON.parse() 方 法 将 其 转换 回 对 象 。 以 下 
就 是 相应 的 代码 : 
//]JSON 文 本 转换 为 原来 的 对 象 


var score = JSON.parse(sessionStorage.getItem("personalityScore")); 


// 从 对 象 中 取得 数据 
lblScoreInfo.innerHTML = "Your extraversion Score is " + score.extraversion; 


要 查看 这 个 例子 的 完整 代码 ， 包 括 每 个 人 格 因 素 的 计算 过 程 ， 请 参考 http://prosetech. 
com/html5 中 的 页 面 。 要 了 解 更 多 关于 JSON 的 内 容 ， 看 看 JSON 格 式 的 数据 长 什么 样 ， 请 参考 
http://en.wikipedia.org/wiki/JSON。 


10.2.5 ”了 响应 存储 变化 


Web 存 储 也 为 我 们 提供 了 在 不 同 浏览 器 窗口 间 通 信 的 机 制 。 具体 来 说 ,就 是 在 本 地 存储 或 会 
话 存 储 发 生变 化 时 ， 其 他 查看 同一 页 面 或 者 同一 站 点 中 其 他 页 面 的 窗口 就 会 触发 window. 
onSstorage 事 件 。 因 此 ， 如 果 你 在 www.GoatsCanFloat.org/storeStuff html 页 面 中 改变 了 本 地 存储 ， 
那么 打开 www.GoatsCanFloat.org/checkStorage.html 页 面 的 窗口 会 触发 onStorage 事 件 。( 当然 ， 必 
须 是 同一 台 计 算 机 中 相同 的 浏览 器 打开 的 页 面 ， 这 一 点 你 已 经 知道 了 。 ) 

所 谓 存储 变化 , 指 的 就 是 向 存储 中 添加 新 数据 项 ， 修 改 既 有 数据 项 ,删除 数据 项 或 清除 所 有 
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数据 。 但 是 , 那些 对 存储 不 产生 任何 影响 的 操作 〈 比如 用 既 有 的 键 名 保存 相同 的 值 , 或 者 清除 原 
本 就 是 空 的 存储 空间 )， 不 会 引发 onStorage 事 件 。 

下 面 看 看 图 10-4 所 示 的 页 面 。 可 以 在 这 个 页 面 中 向 本 地 存储 添加 任何 数据 项 ， 只 要 在 相应 的 
文本 框 中 输入 键 和 值 即 可 。 保 存 新 数据 项 时 ， 第 二 个 页 面 就 会 报告 保存 了 什么 。 
























































[ES 图 10-4: 为 了 体验 onstorage 事 件 ， 同 时 打开 
下 rage Events orage Events 
Po ne eT | StorageEvents1.html 和 StorageEvents2.html。 当 你 
© localhost/StorageEvents1.htm p x i 
i og et 入 | 在 第 一 个 页 面 (上 ) 中 添加 或 修改 数据 项 时 ， 
LocaL STORAGE 第 二 个 页 面 ( 下 ) 会 响应 该 事件 ， 并 报告 结果 
( 底部 ) 
Key: |randomText 
Value: |Can anybody else read this 引 
人 
人 = lhe 
[1 Storage Events 了 [9 Storage Events \ 和 
人 G | 图 localhostymanitest/StorageEvents2.ht 穷 | 色 


Local storage updated. 


Key: randomText 

Old Value: null 

New Value: Can anybody else read this? 

URL: http://localhost/manitest/StorageEvents1.html 


























图 10-4 所 示 的 示例 涉及 两 个 页 面 ， 第 一 个 页 面 负责 保存 数据 。 在 这 个 页 面 中 ， 单 击 Add 按 钮 
会 触发 一 个 小 函数 addValue()， 其 代码 如 下 : 
function addValue() { 
// 取 得 两 个 文本 框 中 的 值 


var key = document.getElementById("key").value; 
var item = document.getElementById("item").value; 


// 在 本 地 存储 中 保存 数据 项 
// (如 果 同 名 键 已 经 存在 ， 则 用 新 值 蔡 换 旧 值 ) 
localStorage.setItem(key, item); 
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第 二 个 页 面 很 简单 ,就 是 在 页 面 加 载 后 为 window.onStorage 事 件 添 加 一 个 处 理 函 数 ,代码 如 下 : 


window.onload = function() { 
// 把 onStorage 事 件 与 storageChanged() 函 数 联系 起 来 
window.addEventListener("storage", storageChanged, false); 


}; 

以 上 代码 与 我 们 前 面 展 示 的 添加 事件 处 理 程 序 的 代码 有 所 不 同 。 在 此 ， 我 们 没有 设置 
window.onstorage 事 件 ， 而 是 调用 了 window.addEventListener()。 这 是 为 了 确保 代码 在 所 有 浏览 
器 中 都 能 运行 ， 而 这 样 写 是 最 简单 的 形式 。 如 果 直 接 设置 window.onstorage 事 件 ， 那 么 这 个 例子 
在 Firefox 中 就 不 能 运行 (因为 Firefox 的 window 对 象 没有 onstorage 属 性 )。 














注意 “Web 老手 可 能 还 记得 addEventListener() 方 法 不 能 在 IE8 (或 更 早 版 本 中 ) 使 用 。 在 这 个 
例子 中 ， 其 实 不 用 考虑 这 个 问题 ， 因 为 IE8 根 本 就 不 支持 存储 事件 。 





storageChanged() 函 数 的 任务 很 简单 ， 只 是 取得 更 新 的 信息 ,然后 通过 页 面 中 的 <div> 元 素 显 
示 出 来 : 


function storageChanged(e) { 
var message = document.getElementById("updateMessage"); 
message.innerHTML = "Local storage updated."; 
message.innerHTML += "<br>Key: ”+ e.key; 
message.innerHTML += "<br>01d Value: ”+ e.oldValue; 
message.innerHTML += "<br>New Value: " + e.newValue; 
message.innerHTML += "<br>URL: ”+ e.url; 


} 

可 见 ，onStorage 事 件 提 供 了 不 少 信 息 ， 包 括 发 生变 化 的 键 和 值 、 原 来 的 值 (oldvalue )、 新 
值 (newValue ) 和 导致 此 次 变化 的 页 面 URL。 如 果 onStorage 事 件 反映 的 是 插入 新 数据 项 ， 那 么 
e.oldValue 属 性 要 么 是 null ( 在 大 多 数 浏览 器 中 ) 或 者 空 字符 串 ( 在 Internet Explorer 中 )。 














注意 ”如果 同时 打开 了 同一 站 点 的 多 个 页 面 ， 那 么 这 些 页 面 会 依次 发 生 onStorage 事 件 ， 只 有 导 
致 变化 的 页 面 ( 即 前 面 例 子 中 的 StorageEvents1.html ) 不 会 发 生 该 事件 。 不 过 ，IE 是 个 例 
外 ， 它 也 会 在 导致 变化 的 页 面 触 发 onStorage 事 件 。 


10.3 ” 读 取 文件 


作为 HTML5 的 一 部 分 ，Web 存 储 得 到 了 很 好 的 支持 。 但 这 并 不 是 存 取 数据 的 唯一 方式 。 为 
了 实现 与 存储 相关 的 不 同 任务 ， 也 出 现 了 其 他 几 种 不 同 的 标准 。 其 中 一 个 就 是 File API， 从 技术 
角度 讲 ， 它 并 不 是 HTML5 规 范 的 内 容 ， 但 得 到 了 现代 浏览 器 较 好 的 支持 ， 卫 除外 〈IE10 才 开始 
支持 )。 
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File API， 这 名 字 听 起 来 蛮 大 气 嘛 ! 不 知道 的 ， 还 以 为 它 是 针对 浏览 融 读 写 硬 盘 文 件 而 制定 
的 一 个 全 方位 的 标准 。 然 而 , 它 可 没有 那么 高 远 的 志向 , 或 者 说 没有 那么 强大 。 简单 地 说 , File API 
只 是 规定 怎么 从 硬盘 上 提取 文件 , 直接 交 给 在 网 页 中 运行 的 JavaScript 代 码 。 然后 代码 可 以 打开 文 
件 探究 数据 ， 无 论 是 文本 文件 还 是 其 他 文件 。 注 意 ， 关 键 在 于 文件 会 被 直接 交 给 JavaScript 代 码 。 
与 以 往 的 文件 上 传 不 一 样 ，File API 不 是 为 了 向 服务 器 提交 文件 设计 的 。 

另外 ， 关 于 File API 不 能 做 什么 ， 也 非常 值得 注意 。 很 明显 ， 它 不 能 修改 文件 ， 也 不 能 创建 
新 文件 。 想 保存 任何 数据 ， 你 都 要 采用 其 他 办 法 ， 比 如 通过 XMLHttpRequest ( 参见 12.1.1 节 ) 把 数 
据 发 送 到 服务 器 ， 或 者 把 它 保 存在 本 地 存储 空间 中 。 

说 到 这 儿 ， 有 读者 可 能 会 认为 File API 不 如 本 地 存储 有 用 。 咽 ， 对 于 大 多 数 站 点 而 言 ， 的 确 
如 此 。 可 是 ， 从 某 种 意义 上 讲 ，File API 却 为 HTML 扩 展 了 疆界 ， 至 少 在 没有 插件 的 情况 下 ， 通 
过 它 能 够 走 得 更 远 。 






























































注意 ”目前 ，File API 对 于 某 些 专门 网 站 是 不 可 或 缺 的 。 将 来 ， 随 着 其 功能 的 增强 ， 还 会 变 得 越 
来 越 重要 。 比 如 , 将 来 的 菜 个 版 本 可 能 会 允许 网 页 在 本 地 硬盘 上 写 文件 ， 让 用 户 通过 “ 保 
存 对 话 框 ”控制 文件 名 和 保存 位 置 。Flash 浏 览 器 插件 已 经 具备 了 这 种 能 力 。 


10.3.1 取得 文件 


在 通过 File API 操 作文 件 之 前 ， 首 先 必 须 取 得 文件 。 为 此 ， 有 三 种 方式 可 以 选择 ;实际 上 ， 
归根 结 底 只 有 一 种 方式 ， 那 就 是 必须 由 访客 自己 选择 文件 然后 提交 给 你 。 
这 三 种 方式 如 下 。 

口 使 用 <input> 元 素 。 将 其 type 属 性 设置 为 file， 这 样 就 能 得 到 一 个 标准 的 上 传 文件 框 。 不 

过 ， 编 写 一 点 JavaScript 来 利用 File API， 就 可 以 在 本 地 打开 文件 。 

口 隐藏 的 <input> 元 素 。 嫌 <input> 元 素 太 难看 ”为 了 保证 风格 一 致 ， 可 以 把 <input> 元 素 隐 
藏 起 来 ， 显 示 一 个 漂亮 的 按钮 。 用 户 单 击 按钮 ， 就 通过 JavaScript 调 用 隐藏 的 <input> 元 素 
的 click() 方 法 。 这 样 就 会 显示 标准 的 文件 选择 对 话 框 。 

口 拖 放 。 如 果 浏 览 器 支持 拖 放 ， 可 以 从 桌面 或 资源 管理 器 中 把 文件 拖 放 到 网 页 上 。 

接 下 来 几 节 就 讨论 这 几 种 方式 。 


10.3.2 ”用 <input> 读 取 文 本 文件 


使 用 File API 可 以 直接 读 取 文 本 文件 的 内 容 。 图 10-5 展 示 了 一 个 例子 ， 是 一 个 页 面 读 取 了 一 
个 网 页 文件 中 的 标准 ， 然 后 显示 出 来 。 
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Frerox™ | [ei 并 到 | 图 10-5， 单 击 Browse 按 钮 ( 或 Choose File， 




















| 口 Read Tet [+| 在 Chrome 中 ) ， 选择 一 个 文件 ， 然 后 单 击 
| €) | LL) http://localhost/manitest/ReadText.html = |C | 会 加 | OK。 无 需 上 传 网 页 中 的 JavaScript 就 能 
| CAHTMLSChapter0THTML5Template html 取得 文本 文件 ， 把 内 容 复制 到 页 面 中 


<IDOCTYPE html> <html lang="en"> <head> <meta charset "utf-8"> 
<title>A Tiny HIML Document</title> <!-- Note that the following fles 
don't exist They're for demonstration purposes only. --> <tnk 
href="styles.css" rel="stylesheet"> <script src="scripts.js"></script> 


</hecad> <body> <p>Let's rock the browser, IITMLS style.</p> 
</body> </htmt> 























要 创建 这 个 例子 ,首先 要 使 用 一 个 <input type="file"> 元 素 ， 这 样 就 能 得 到 文本 框 和 浏览 器 
按钮 : 

<input id="fileInput" type="file" onchange="processFiles(this.files)"> 

不 过 ,与 往常 属于 <form> 元 素 并 且 会 将 文件 发 送 给 Web 服 务 器 的 <input> 元 素 不 同 ， 这 个 
<input> 有 自己 人 处理 文件 的 方式 。 访 客 选择 了 一 个 文件 后 ， 就 会 触发 这 个 <input> 元 素 的 onChange 
事件 ， 因 而 就 会 执行 processFiles() 函 数 。 这 个 函数 将 会 通过 JavaScript 来 打开 文件 。 

下 面 我 们 就 来 一 行 一 行 地 分 析 processFiles() 函 数 。 这 个 函数 首先 必须 从 <input> 元 素 提 供 的 
文件 集合 中 取得 第 一 个 文件 。 除 非 你 允许 用 户 选 择 多 个 文件 ( 使 用 multiple 属 性 )， 否 则 文件 集 
合 中 只 会 有 一 个 文件 ， 而 该 文件 在 集合 中 的 索引 就 是 0: 


function processFiles(files) { 
var file = files[0]; 








注意 ”每 个 文件 对 象 都 有 三 个 有 用 的 属性 : name 属 性 保存 文件 名 (不 包含 路 径 )，size 属 性 保存 
文件 的 字 节 大 小 ， 而 (如果 可 以 确定 的 话 ) type 属 性 保存 文件 的 MIME 类 型 (参见 5.3.1 
节 )。 可 以 分 别 读 取 这 三 个 属性 ， 然 后 加 入 判断 ， 比 如 拒绝 处 理 超过 一 定 大 小 的 文件 ， 或 
者 只 允许 某 种 类 型 的 文件 。 


然后 ， 创 建 FileReader 对 象 ， 以 便 处 理 文件 : 
var reader = new FileReader(); 
紧 接着 ,差不多 就 可 以 调用 FileReader 的 方法 来 提取 文件 内 容 了 。 但 这 个 对 象 的 方法 都 是 嵌 
的 ， 也 就 是 说 可 以 不 必 等 待 数 据 而 立即 读 取 。 要 取得 文件 内 容 ， 首 先 要 处 理 onLoad 事 件 : 





sy 





mu 


reader.onload = function (e) { 
// 这 个 事件 发 生 ， 意 味 着 数据 准备 好 了 
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// 把 它 复 制 到 页 面 的 <div> 元 素 中 

var output = document.getElementById("fileOutput"); 
output .textContent = e.target.result; 

}; 


最 后 ， 在 这 个 事件 处 理 程序 之 后 ， 调 用 FileReader 的 readAsText() 方 法 : 


reader.readAsText(file); 


} 

这 个 方法 会 把 文件 内 容 转 换 成 一 个 长 字符 串 , 保存 在 发 送 给 onLoad 事 件 的 e.target.result 中 。 

readAsText() 方 法 只 能 处 理 包含 文本 内 容 ( 而 不 是 二 进 制 内 容 ) 的 文件 。HTML 文 件 当然 没 
有 问题 ， 图 10-5 展 示 的 就 是 读 取 HTML 文 件 的 结果 。CSV 格 式 也 是 各 种 有 用 的 纯 文本 格式 中 的 一 
种 ， 它 是 所 有 电子 表格 程序 都 支持 的 一 种 导出 格式 。XML 也 是 纯 文本 格式 ， 它 是 程序 间 交 换 数 
据 的 一 种 标准 。( XML 也 是 Office XML 格式 的 基础 ， 因 此 可 以 使 用 readAsText() 方 法 直接 处 
理 .docx 和 .xlsx 文 件 。) 





























注意 JavaScript 语言 还 有 内 置 的 XML 解释 器 ， 因 此 可 以 从 XML 文件 中 直接 提取 所 需 内 容 。 当 
然 ， 处 理 XML 文 件 要 编写 很 多 代码 ， 而 且 处 理 大 文件 的 效率 也 不 高 。 与 把 大 文件 上 传 到 
Web 服 务 器 并 在 服务 器 上 处 理 相 比 ， 在 本 地 处 理 大 XML 文件 没有 多 大 优势 。 不 过 ， 我 们 
至 少 能 够 看 到 File API 带 来 了 哪些 可 能 性 ， 而 这 些 功 能 是 几 年 前 的 人 们 连 想 也 不 敢 想 的 。 








readAsText() 只 是 众多 读 取 文件 的 方法 之 一 。FileReader 对 象 提供 的 方法 还 有 : readAs 
BinaryString()、readAsDataURL() 和 readAsArrayBuffer()。 

其 中 ，readAsBinarystring() 方 法 可 以 让 应 用 处 理 二 进 制 编码 的 数据 ,但 基本 上 就 是 把 数据 
保存 到 一 个 文本 字符 串 中 , 效率 不 高 。 如 果 你 真 想 要 解释 二 进 制 数据 ， 禹 怕 就 要 处 理 好 特别 复杂 
的 编码 问题 。 

对 那些 需要 自己 认真 地 做 数据 处 理 的 开发 者 来 说 , readAsArrayBuffer() 是 更 好 的 选择 。 这 个 
方法 将 数据 读 到 一 个 数组 中 (参见 附录 B ), 每 个 数组 项 代表 一 字 节 数据 。 这 套 方案 的 优势 是 可 以 
用 来 创建 Blob 对 象 ， 然 后 切 分 成 更 小 的 二 进 制 数 据 块 ， 以 便 逐 块 处 理 。 

































































注意 ”Blob 是 binary large object 的 缩写 ,意思 是 一 大 块 数据 。Blob 是 File API 的 优势 ; 要 了 解 更 多 
相关 知识 ， 可 以 参阅 Mozilla 持 续 更 新 的 文档 : http://tinyurl.com/file-blob。 


而 readAsDataURL() 方 法 则 让 我 们 能 方便 地 取得 图 片 数 据 。10.3.5 节 将 介绍 如 何 使 用 这 个 方法 。 
不 过 ， 我 们 该 花 点 时 间 ， 先 把 前 面 的 例子 页 面 改造 得 漂亮 些 。 


10.3.3 ”替换 标准 的 上 传 控 件 


Web 开 发 人 员 一 致 认为 , 用 于 提交 文件 的 标准 <input> 控 件 非常 难看 。 虽 然 必 须 得 用 它 , 但 可 
以 不 让 任何 人 看 见 它 。 换 句 话 说， 就 是 像 下 面 这 样 把 它 隐藏 起 来 : 
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#fileInput { 
display: none; 


接着 再 添加 一 个 新 的 按钮 , 用 于 触发 提交 操作 。 一 个 普通 的 按钮 就 可 以 胜任 ,而 且 可 以 任意 
修改 其 外 观 : 

<button onclick="showFileInput()">Analyze a File</buttony> 

最 后 一 步 是 处 理 按钮 单 击 事件 ， 通 过 该 事件 来 手工 调用 隐藏 的 cinput> 元 素 的 click() 方 法 : 


function showFileInput() { 
var fileInput = document.getElementById("fileInput"); 
fileInput.click(); 

} 


这 样 ， 单 击 按钮 就 可 以 运行 showFileInput() 函 数 ， 该 函数 会 模拟 单 击 隐 藏 的 Browse 按 钮 ， 
并 显示 出 对 话 框 供 访客 选择 文件 。 访客 选择 了 文件 后 ， 又 会 触发 隐藏 的 cinput> 元 素 的 onChange 
事件 ， 于 是 processFiles() 函 数 运 行 ， 一 切 跟 以 前 一 样 。 


10.3.4 一 次 读 取 多 个 文件 


没有 理由 限制 用 户 一 次 只 能 提交 一 个 文件 -HTML5 也 支持 一 次 提交 多 个 文件 ,只 要 为 cinput> 
元 素 添加 multiple 属 性 即 可 : 


<input id="fileInput" type="file" onchange="processFiles(this.files)" 
multiple> 


这 样 ， 用 户 就 可 以 在 打开 的 对 话 框 中 一 次 选择 多 个 文件 了 ( 比如 在 Windows 中 按 Ctrl 键 并 单 
击 多 个 文件 , 或 者 用 鼠标 拖 出 一 个 选择 框 )。 支持 选择 多 个 文件 ,代码 也 要 相应 修改 。 换 句 话 说 ， 
不 能 再 像 前 面 例子 中 那样 ， 只 取得 集合 中 的 第 一 个 文件 了 。 这 次 ， 要 使 用 for 循 环 来 依次 处 理 每 
个 文件 : 

for (var i=0; icfiles.length;j i++) { 


// 取 得 下 一 个 文件 
var file = files[i]; 
































// 为 这 个 文件 创建 FileReader 对 象 ， 然 后 运行 相同 的 代码 
var reader = new FileReader(); 
reader.onload = function (e) { 





0 


reader.readAsText(file); 


} 


10.3.5 ”通过 拖 蝶 读 取 图 片 文件 


前 面 我 们 看 到 了 ，FileReader 人 处理 文本 内 容 只 需要 一 步 。 同 样 ， 处 理 图 片 内 容 也 这 么 简单 ， 
而 这 就 要 归功 于 readAsDataURL() 方 法 。 
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图 10-6 展 示 了 一 个 涉及 两 项 功能 的 例子 : 处 理 图 片 和 文件 拖 放 。 提 交 的 图 片 文 件 用 于 绘制 元 
素 的 背景 。 当 然 也 可 以 把 图 片 绘制 到 画布 中 , 然后 利用 画布 的 原始 像素 处 理 功能 来 修改 图 片 ( 参 
见 9.5.3 节 )。 综合 利用 该 技术 ,可 以 让 用 户 把 图 片 拖 到 页 面 中 , 然后 在 图 片上 绘制 或 者 修改 图 片 ， 


最 后 再 使 用 XMLHttpRequest 调 用 (参见 12.1.1 节 ) 把 结果 上 传 到 服务 器 。 
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图 10-6: 为 页 面 提供 图 
片 有 两 种 方式 : 使 用 下 
面 的 文件 上 传 控件 ， 或 
者 把 一 或 多 个 图 片 拖 放 
到 虚线 框 中 























要 创建 这 个 页 面 ， 首先 要 添加 一 个 元 素 ， 以 捕获 拖 放 过 来 的 文件 。 在 我 们 的 例子 中 ， 这 个 元 


素 是 一 个 名 为 dropBox 的 <div>: 


<div id="dropBox"> 


<div>Drop your image here...</div> 


</div> 


写 几 行 简单 的 样式 声明 ， 就 可 以 为 其 设置 好 指定 大 小 、 边 框 和 颜色 : 


#dropBox { 
margin: 15px; 
width: 300px; 
height: 300px; 
border: 5px dashed gray; 
border-radius: 8px; 
background: lightyellow; 
background-size: 100%; 


background-repeat: no-repeat; 


text-align: center; 


} 


#dropBox div { 
margin: 100px 70px; 
color: orange; 
font-size: 25px; 





286 | 第 10 章 数据 存储 


font-family: Verdana, Arial, sans-serif; 





眼光 敏锐 的 读者 肯定 已 经 发 现 了 background-size 和 background-repeat 属 性 。 这 两 个 属性 是 
为 了 接 下 来 的 功能 作 准 备 的 。 当 把 图 片 拖 放 到 这 个 <div> 上 时 ， 图 片 会 作为 它 的 背景 。 而 
background-size 属 性 是 为 了 缩小 图 片 以 全 部 显示 ，background-repeat 属 性 则 是 为 了 不 让 图 片 重 
复 显 示 。 

为 了 处 理 放置 文件 的 操作 ， 需 要 处 理 三 个 事件 : onDragEnter 、onDrag0ver 和 onDrop。 页 面 一 
加 载 完 成 ， 就 会 为 这 三 个 事件 添加 处 理 程序 : 


var dropBox; 

















window.onload = function() { 

dropBox = document.getElementById("dropBox"); 
dropBox.ondragenter = ignoreDrag; 
dropBox.ondragover = ignoreDrag; 
dropBox.ondrop = drop; 


}; 
其 中 ，ignoreDrag() 函 数 同 时 处 理 onDragEnter 和 onDragOver 事 件 ， 前 者 在 鼠标 指针 进入 放置 
区 时 发 生 , 后 者 在 拖 动 文件 的 鼠标 指针 位 于 放置 区 之 上 时 发 生 。 之 所 以 用 同一 个 函数 处 理 两 个 事 
件 , 原因 就 是 不 必 对 这 两 个 事件 作出 反应 ， 只 要 告诉 浏览 器 自己 什么 也 不 做 即 可 。 这 个 函数 的 代 
码 如 下 : 
function ignoreDrag(e) { 
// 因 为 我 们 在 处 理 拖 放 ， 所 以 应 该 
// 确 保 没 有 其 他 元 素 会 取得 这 个 事件 
e.stopPropagation(); 


e.preventDefault(); 
3 


我 们 要 响应 的 事件 是 onDrop， 这 个 事件 一 发 生 ， 就 说 明 要 取得 和 处 理 文 件 了 。 不 过 ， 由 于 存 
在 两 种 向 页 面 提交 文件 的 方式 ， 所 以 drop() 困 数 调用 了 实际 上 负责 处 理 的 processFiles() 国 数 : 


function drop(e) { 
// 取 消 事 件 传 播 及 默认 行为 
e.stopPropagation(); 
e.preventDefault(); 


























// 取 得 拖 进来 的 文件 

var data = e.dataTransfer; 

var files = data.files; 

// 将 其 传 给 真正 的 处 理 文 件 的 济 数 
processFiles(files); 


} 
最 后 一 个 函数 就 是 processFiles() ， 它 会 创建 一 个 FileReader ， 为 其 on1oad 事 件 添 加 一 个 函 
数 ， 然 后 调用 readAsDataURL() 将 图 片 转换 为 数据 URL ( 参见 8.2.3 节 )。 
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注意 ”正如 在 学 习 Canvas 时 所 提 到 的 ， 数 据 URL 是 一 种 用 长 字符 串 表 示 图 片 的 方式 。 这 种 方式 
让 传递 图 片 数 据 变 得 十 分 方便 。 为 了 在 网 页 中 显示 图 片 ， 可 以 将 <img> 元 素 的 STC 属 性 设 
置 为 图 片 URL (正如 9.1.1 节 所 做 的 那样 )， 也 可 以 将 CSS 的 background-image 属 性 设置 为 
图 片 URL ( 像 这 个 例子 中 一 样 )。 


function processFiles(files) { 
var file = files[0]; 


// 创 建 FileReader 
var reader = new FileReader(); 


// 告 诉 它 在 准备 好 数据 URL 之 后 做 什么 
reader.onload = function (e) { 
// 使 用 图 像 URL 来 绘制 dropBox 的 背景 
dropBox.style.backgroundImage = "url('" + e.target.result + "')"; 


了 


// 读 取 图 片 
reader.readAsDataURL (file); 
} 


FileReader 还 有 其 他 事件 ， 在 读 取 图 片 文件 的 过 程 中 可 以 选择 使 用 。 如 果 读 取 图 片 的 时 间 比 
较 长 ， 可 以 通过 onProgress 事 件 ( 间 吹 性 地 触发 ) 来 确定 已 经 加 载 了 多 大 比例 。( 可 以 调用 
FileReader 的 abort() 方 法 取消 未 完成 的 操作 。) 如 果 打 开 或 读 取 文件 时 发 生 错 误 , 会 触发 onError 
事件 。 而 在 操作 完成 时 ， 则 触发 onLoadEnd 事 件 (包括 由 于 错误 导致 的 终止 )。 


10.3.6 浏览 器 对 File API 的 支持 情况 


File API 得 到 了 浏览 器 的 支持 , 但 不 像 Web 存 储 那么 可 靠 。 表 10-1 展 示 了 浏览 器 对 它 的 支持 情况 。 


表 10-1 浏览 器 对 File API 的 支持 情 ; 
IE Firefox Chrome Safari Opera Safari iOS Android 
最 低 版 本 10 3.6 13 6 11.1 6 3 


由 于 File API 需 要 一 些 比 普通 网 页 更 高 的 权限 ， 所 以 通过 JavaScript 来 实现 浏览 器 尚未 实现 的 
功能 是 不 现实 的 。 因 此 ， 需 要 一 个 类 似 Flash 或 Silverlight 的 插件 。 比 如 ， 访 问 https://github.com/ 
MIrSwitch/dropfile， 可 以 找到 一 个 腻子 脚本 ， 利 用 Silverlight 拦 截 拖 放 过 来 的 文件 ， 打 开 并 将 其 内 
容 交 给 网 页 中 的 JavaScript 代 码 。 


10.4 ”IndexDB: 浏览 器 的 数据 库 引擎 


你 可 能 熟悉 数据 库 的 概念 一 一 一 种 严格 结构 化 的 信息 目录 ,可 以 往 里 塞 任何 类 型 的 数据 :人 、 
产品 、 销 售 额 ， 等 等 。 许 多 网 站 都 使 用 存储 在 Web 服 务 器 上 的 数据 库 。 比 如 ， 当 你 在 亚马逊 上 查 
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找 一 本 书 时 , 页 面 会 从 亚马逊 巨大 的 数据 库 中 提取 详情 。 同 样 的 情况 还 有 在 维基 百科 中 查找 一 篇 
文章 ， 在 YouTube 上 查找 一 个 视频 ,或 者 在 百度 上 进行 一 次 搜索 。 

数 年 来 ， 故 事 一 直 是 这 样 的 : 数据 库 是 服务 器 的 领地 ， 没 的 商量 ! 但 HTML5 带 来 了 希望 。 
何不 让 浏览 器 具备 创建 本 地 数据 库 ( 数据 库 保存 在 用 户 电脑 上 ,而 不 是 遥远 的 服务 器 上 ) 的 能 力 ? 
一 时 间 ， 突 然 出 现 各 种 方案 ,包括 一 度 流行 但 现 已 废弃 的 Web SQL Databases 标 准 。 不 久 前 , 仍 
在 发 展 中 的 IndexedDB 标 准 一 路 成 为 HTML5 官 方 认 可 的 本 地 数据 库 解决 方案 。 























注意 “IndexedDB” 这 个 名 字 强 调 了 数据 库 的 本 质 : 用 索引 标识 和 排列 数据 。 索 引 确 保 了 你 不 
会 在 两 个 不 同 的 地 方 取 到 同一 条 数据 ， 当 你 有 海量 数据 时 ， 索引 还 加 快 了 数据 读 取 速度 。 


服务 器 端 和 客户 端 数 据 库 的 区 别 
网 站 使 用 服务 器 端 数 据 的 方式 有 很 多 种 ， 但 都 跟 HTML5 没 关系 。 这 是 为 什么 呢 ? 因为 
HTML5S 聚 焦 于 加 载 到 用 户 浏览 器 的 标记 语言 代码 、 样 式 和 JavaScript。 你 电脑 上 的 浏览 器 并 没 
有 直接 访问 服务 器 数据 库 的 方式 。 即 便 技术 上 是 可 能 的 , 但 会 带 来 各 种 安全 问题 。 因 此 ， 要 和 
一 个 服务 器 端 数 据 库 交互 ， 需 要 编写 在 服务 器 运行 的 代码 。 比 如， 网 站 通常 使 用 PHP 或 者 C# 
代码 (当然 还 有 许多 其 他 技术 ) 来 完成 服务 器 端 数据 库 相 关 任 务 ， 比 如 生成 一 个 检索 结果 页 或 
者 记录 用 户 的 购买 行为 。 





在 继续 之 前 ， 先 来 搞 清楚 到 底 IndexedDB 在 Web 应 用 中 扮演 什么 角色 ， 这 很 重要 ! 因为 众多 原 
因 ，IndexedDB 绝 不 会 取代 服务 器 端 数据 库 。 最 重要 的 是 ，IndexedDB 给 每 个 用 户 创建 一 个 独立 的 
数据 库 ， 而 使 用 服务 器 端 数据 的 网 站 需要 一 个 唯一 的 、 集 中 分 类 的 数据 ， 可 以 分 享 给 每 个 用 户 。 

但 是 ，IndexedDB 在 其 他 一 些 特定 场景 下 很 有 用 : 

口 创建 自给 自足 的 离线 应 用 。 在 11 章 ， 我 们 将 介绍 如 何 利用 HTML5 缓 存 ， 让 网 页 在 即便 没 

有 网 络 连 接 的 情况 下 也 能 运行 ， 这 是 一 项 非常 适合 移动 设备 的 技术 。 可 以 用 IndexedDB 让 
离线 应 用 变 得 更 能 干 。 比 如 ， 页 面 可 以 在 有 网 络 连接 的 时 候 从 服务 器 端 数据 库 获取 所 需 
的 数据 (使 用 12.1.1 节 介绍 的 XMLHttpRequest 对 象 )， 然 后 将 数据 保存 到 本 地 数据 库 ， 以 便 
在 离线 时 访问 。 

口 优化 性 能 。 一 些 应 用 使 用 了 大 量 的 数据 ， 如 果 持 续 地 在 需要 时 获取 同样 的 数据 ， 网 页 的 
性 能 会 下 降 。 类 似 地 ， 如 果 创 建 一 个 通过 复杂 计算 生成 数据 的 应 用 ， 你 一 定 不 想 浪 费时 
间 重 复 做 同样 的 计算 。 解 决 方案 是 将 所 有 需要 的 数据 保存 到 一 个 IndexedDB 数 据 库 中 。 把 
它 当 成 你 的 超级 定制 缓存 吧 。 

口 改进 本 地 存储 。 正 如 我 们 前 面 了 解 到 的 ， 本 地 存储 提供 了 一 个 地 方 来 保存 浏览 器 会 话 间 
的 数据 ， 并 在 页 面 之 间 传 递 。 如 果 相 对 来 说 数据 结构 较 简 单 并 且 不 大 ， 普 通 的 JavaScript 
变量 和 对 象 就 能 胜任 。 但 如 果 数 据 非常 巨大 或 者 结果 非常 复杂 , 用 IndexedDB 数 据 库 来 管 
理 就 会 更 加 简单 快捷 。 
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注意 IndexedDB 存 储 在 几 个 重要 方面 表现 得 很 像 本 地 存储 。 最 重要 的 是 ， 一 个 IndexedDB 数 据 
库 属 于 某 个 个 人 ， 使 用 特定 的 电脑 和 特定 的 浏览 器 ， 访 问 特 定 的 网 站 。 任 何 一 项 有 变化 
(比如 切换 浏览 器 ， 用 另 一 个 账号 登录 ， 或 者 换 用 手机 访问 )， 网 页 都 会 对 应 一 个 新 的 
IndexedDB 数 据 库 。 


学 习 IndexedDB 可 能 会 让 人 愤 步 。 首 先 ， 标 准 很 复杂 (一些 茄 刻 的 开发 者 用 丑陋 来 形容 )。 
Web 开 发 者 负责 创建 数据 库 ， 构 建 它 的 数据 表 ， 并 且 给 它们 填充 数据 。 其 次 ，IndexedDB 使 用 异 
步 模式 ,这 意味 着 数据 库 任务 在 后 台 运 行 , 不 会 阻塞 代码 运行 或 锁定 页 面 。 缺 点 就 是 这 种 更 复杂 
的 模式 会 让 代码 分 散 到 不 同 地方 。 比 如 , 开始 一 个 数据 库 任 务 的 代码 和 处 理 这 个 任务 结果 的 代码 
不 在 一 个 地 方 。 要 理 出 这 些 代 码 块 的 执行 顺序 并 且 理 解 它们 如 何 组 合 到 一 起 , 还 是 要 花 点 精力 的 。 

图 10-7 展 示 了 一 个 数据 库 驱 动 的 页 面 ， 我 们 将 在 本 章 随 后 分 析 它 。 它 用 IndexedDB 功 能 的 一 
些 基本 操作 来 保存 链接 信息 。 数据库 中 的 每 一 条 记录 都 由 一 个 URL 和 一 些 相关 信息 组 成 ， 比 如 它 
的 名 字 和 说 明 。 使 用 FavoriteSiteTracker.html 页 面 ， 可 以 添加 新 的 链接 数据 、 浏 览 已 有 的 数据 ， 以 
及 修改 或 删除 某 条 数据 一 一 这 些 都 是 任何 数据 库 代 码 的 基本 操作 。 























= 本 到 图 10-7， 这 个 例子 用 IndexedDB 





四 Favorite Site Tracker x\ 


























CC QQ FavoriteSiteTracker.html 一 数据 库 保 存 链 接 信 息 [eo 页 面 顶 
“| ”部 有 一 个 用 来 创建 新 的 链接 数 
These are a few of my favorite links... 据 的 表单 。 下 面 是 一 个 数据 库 
This page shows a serious example of HTMLS overkill. ltusesa browser-powered database to let you keep 中 尼 有 和 链 接 的 列 表 显 示 了 名 
track of your own personal list of links. (Kind of like your browsers bookmark list, but with a bit more 
information.) 称 和 U RL ( 没有 其 他 信息 了 ) [e) 
jad | 如 往常 一 样 ， 可 以 访问 http:/ 
N f the site: The HTMLS Try Out Sit: AS 
ee = = prosetech.com/html5 来 体验 这 个 
URL (web address): http://prosetech.com/html5 
Description: issi 例子 
ption: Examples from HTML5: The Missing Manual 
Why you tike it: There are two ways to play. Download the code to examine in close up and try out 


your own changes. Or, run it online to see how the examples work without needing 
your own web server. 


Add Link Show Links 


Links youve added so far: 
http:/ /oreilly.com/missingmanuals/ (Details Delete) 
The HTML5 Try Out Site (Details Delete) 



































10.4.1 数据 对 象 
在 开始 学 习 这 个 链接 追踪 示例 之 前 ， 先 来 学 习 一 下 它 所 保存 的 数据 一 一 LinkRecord 对 象 。 传 
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统 的 数据 库 都 是 围绕 数据 表 和 字段 ， 但 IndexedDB 简 化 了 一 下 一 一 存储 对 象 。 所 以 在 创建 数据 库 
之 前 ， 最 好 先 用 JavaScript 定 义 数据 结构 。 
在 这 个 例子 中 , 数据 库 有 一 个 唯一 的 数据 表 ，, 里 面 的 每 条 数据 都 是 一 个 单个 链接 的 信息 。 可 
以 用 一 个 对 象 定义 函数 将 这 些 链 接 信息 打 包 ， 代 码 如 下 : 
function LinkRecord(name, url, description, notes) { 
this.name = name; 
this.url = url; 


this.description = description; 
this.notes = notes; 


} 
有 了 这 段 代 码 , 就 可 以 在 需要 时 调用 它 来 创建 一 个 LinkRecord 对 象 , 包含 描述 性 名 称 、URL、 
完整 描述 和 注解 。( 如 果 对 JavaScript 对 象 创建 有 疑惑 ， 请 参阅 附录 B 温 习 一 下 。) 


10.4.2 ”创建 并 连接 数据 库 


在 任何 使 用 mdexedDB 的 网 页 中 ， 首 要 任务 都 是 连接 数据 库 。 由 于 通常 都 是 在 页 面 第 一 次 加 
载 完 成 时 开始 处 理 这 个 任务 ， 不 妨 就 在 window.onload 事 件 回调 中 处 理 ， 下 面 是 代码 框架 : 


var database; 




















window.onload = function () { 


} 

database 变 量 定义 在 函数 外 面 ， 这 样 就 可 以 在 代码 的 任何 地 方 访问 到 它 。 

所 以 ， 当 页 面 加 载 完 成 时 ， 代 码 需 要 做 什么 呢 ? 这 取决 于 你 在 这 之 前 已 经 做 了 什么 。 

口 如 果 用 户 是 第 一 次 访问 页 面 ， 则 需要 创建 数据 库 并 设置 数据 表 。 

口 如 果 用 户 已 经 访问 过 ， 你 只 需要 打开 数据 库 并 且 设 置 database 变 量 ， 这 样 它 就 能 用 了 。 
不 论 哪 种 方式 ， 起 始点 都 是 window.indexedDB 对 象 的 open() 函 数 。 它 有 两 个 参数 : 要 用 (或 

创建 ) 的 数据 库 的 名 称 ， 以 及 它 的 版 本 号 。 如 果 是 一 个 全 新 的 数据 库 ， 需 设置 版 本 号 为 1: 


var request = window.indexedDB.open("LinksDB", 1); 



































注意 ”给 数据 库 取 什么 名 字 都 没关系 ,只 要 你 保持 一 致 并 且 没 有 在 同一 个 网 站 的 其 他 页 面 用 过 。 


如 前 面 所 介绍 的 ，IndexedDB 的 一 切 都 是 异步 的 。 因 此 ， 当 调用 open() 方 法 时 ， 实 际 上 并 没 
有 打开 什么 , 而 是 发 送 了 一 个 请 求 。 这 个 请 求 是 让 浏览 器 在 适当 的 时 候 打 开 数 据 库 , 并 且 最 好 是 
用 一 个 后 台 线程 ， 这 样 就 不 会 阻塞 页 面 ， 哪 怕 是 一 小 会 儿 。 

你 会 在 几乎 每 一 个 IndexedDB 任 务 中 找到 这 种 异步 请 求 模式 以 及 请 求 对 象 。 要 在 任务 完成 时 
响应 ， 需 要 至 少 设置 两 个 事件 处 理 器 : 一 个 处 理 成 功 结果 的 ( onSuccess ) 和 一 个 处 理 异常 的 
( onError )。 男 外 ， 使 用 open() 时 ， 还 需要 一 个 处 理 onUpgradeNeeded 事 件 的 处 理 器 。 
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打开 一 个 数据 库 时 ， 能 触发 onsuccess 事 件 表 明 指 定 版 本 的 数据 库存 在 。 这 时 你 需要 设置 数 
据 库 变量 以 便 后 面 用 到 。 你 也 可 以 开始 读数 据 。 在 链接 追踪 器 的 例子 中 ,有 个 单独 的 showLinks () 
函数 在 做 这 个 事情 ( 参见 10.4.4 节 )。 


request.onsuccess = function(event) { 
alert("Created or opened database successfully."); 





// 让 数据 库 可 在 任何 地 方 访问 
database = request.result; 
// 调 用 ShowLinks() 函数 读 取 数 据 库 ， 并 显示 已 存在 的 链接 列表 
// list of links that already exist. 
showLinks(); 
}; 
onError 事 件 同 样 简单 。 根 据 错 误 类 型 的 不 同 ， 你 可 以 进行 纠正 ,或 者 简单 地 把 错误 报告 给 
用 户 ， 用 一 个 弹 框 或 者 直接 显示 在 页 面 上 。 


request.onerror = function(event) { 
alert(request.error + " occurred."); 











3 


警告 ”不 要 犯 忽略 onETTor 事 件 处 理 器 的 错误 ， 否 则 ， 就 不 会 有 任何 错误 通知 ， 你 也 不 会 有 任何 
线索 得 知 出 现 了 错误 。 


onUpgradeNeeded 事 件 是 这 3 个 里 面 最 有 趣 的 。 它 会 在 所 请 求 的 数据 库 版 本 不 可 用 时 触发 。 比 
如 ， 如 果 请 求 的 数据 库 版 本 是 2 而 本 地 当前 的 数据 库 版 本 是 1， 就 会 触发 这 个 事件 。 这 个 时 候 ， 可 
以 升级 数据 库 , 比如 添加 一 个 新 数据 表 。( 可 以 从 event.oldVersion 参 数 里 获取 当前 数据 库 版 本 。) 
onUpgradeNeeded 事 件 也 会 在 数据 库 根 本 不 存在 时 触发 ,这 种 情况 下 浏览 器 会 热情 地 创建 一 个 空 数 
据 库 ， 然 后 等 你 往 里 塞 数 据 表 。 

要 创建 一 个 数据 表 ， 必 须 首 先 从 request.result 属 性 中 获取 数据 库 对 象 。 然 后 ， 调 用 它 的 
create0bjectStore() 方 法 。 下 面 这 段 代码 给 数据 库 LinksDB 创 建 了 一 个 名 为 Links 的 数据 表 : 


request.onupgradeneeded = function(event) { 
var db = request.result; 
var objectStore = db.createObjectStore("Links", { keyPath: "url"” }); 
} 
}; 
在 传统 的 数据 库 编程 中 ， 创 建 数据 表 时 需要 指定 字段 名 和 数据 类 型 。 但 IndexedDB 用 了 一 个 
更 简单 的 、 聚 焦 于 对 象 的 模式 。 创 建 数据 表 时 ,只 需 提 供 两 个 信息 : 数据 表 的 名 称 和 关键 字 路 径 ， 
这 是 对 象 中 作为 主 关 键 字 的 属性 。 





























注意 ”关键 字 路 径 相 当 于 数据 对 象 中 的 一 个 属性 。 在 这 个 例子 中 ，url 是 小 写 的 ， 以 匹配 数据 对 
象 中 的 属性 名 。 翻 回 到 10.4.1 节 的 第 一 段 代码 ， 可 以 看 到 LinkRecord 对 象 中 定义 了 一 个 叫 
Url 的 属性 。 
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理解 主 关 键 字 

主 关键 字 是 唯一 标识 每 条 数据 的 信息 。 在 Links 数 据 表 例 子 中 ， 每 条 链接 数据 有 一 个 唯一 
的 URL， 因 此 用 它 做 关键 字 说 得 过 去 。 这 种 机 制 可 以 防止 意外 地 给 同一 个 地 址 创建 两 条 数据 ， 
也 会 强制 浏览 器 给 Links 数 据 表 创建 索引 ， 以 便 可 以 通过 URL 查 找 任何 链接 数据 。 

如 果 数 据 中 没有 明显 适合 做 主 关键 字 的 属性 , 换 名 话说, 没有 一 条 可 以 确保 唯一 性 的 必要 
信息 ， 那 就 可 以 添加 数字 ID 号 ， 这 是 一 种 历史 悠久 的 数据 库 技术 。 更 好 的 方式 是 ， 让 浏览 器 在 
每 次 插入 新 数据 时 自动 生成 唯一 的 数字 ， 这 需要 在 创建 数据 库 时 设置 autoIncrement 属性 为 
true， 代 码 如 下 : 

var objectStore = 


db.createObjectStore("Links", 
{ keyPath: "id", autoIncrement: true }); 


如 果 数 据 库 需 要 多 个 数据 表 ， 可 以 用 不 同 的 数据 对 象 , 多 次 调用 create0bjectStore()。 如 果 
浏览 器 遇 到 问题 ， 会 触发 request.onError 事 件 。 一 旦 数据 表 成 功 添加 ， 就 会 触发 request. 
onSuccess 事 件 ， 代 码 就 可 以 结束 页 面 设 置 了 。 











注意 ， IndexedDB 创 建 的 数据 库 会 永久 保存 ， 就 像 保 存在 本 地 存储 的 对 象 一 样 。 但 是 ， 可 以 用 
window.indexedDB.deleteDatabase() 方 法 删除 一 个 数据 库 ,一 些 浏览 器 还 允许 用 户 查 看 各 
个 网 站 存储 了 多 少数 据 并 删除 任何 他 不 想 要 的 。 


10.4.3 在 数据 库 中 保存 数据 


数据 库 极 客 们 用 数据 操作 这 个 术语 来 描述 在 数据 库 中 针对 数据 表 数 据 的 所 有 操作 , 无 论 是 否 
包括 读 取 、 修 改 、 插 入 或 更 新 数据 。 在 IndexedDB 的 世界 里 , 数据 操作 同样 也 遵循 最 基本 的 4 个 步 
又 。 一 旦 理解 了 这 些 模式 ， 理 解 不 同 数据 库 任 务 的 代码 就 容易 了 。 

以 下 就 是 这 些 步 又 。 

(1) 创建 一 个 事务 。 

任何 时 候 要 用 IndexedDB 做 任何 事情 , 不 论 是 写 数据 还 是 读数 据 , 都 必须 首先 创建 一 个 事务 。 
在 数据 库 中 , 事务 是 作为 一 个 单元 一 起 提交 的 一 个 或 多 个 数据 操作 。 如 果 事务 中 的 任何 一 部 分 失 
败 了 ， 事 务 中 的 所 有 操作 都 会 撤销 ， 数 据 库 会 恢复 到 事务 之 前 的 状态 。 
事务 对 IndexedDB 来 说 很 重要 ， 因 为 有 许多 会 中 断 数据 操作 的 状况 。 比 如 ， 当 页 面 仍然 在 工 
作 时 ,用 户 关 闭 了 页 面 ,浏览 器 会 中 断 页 面 代码 的 执行 。 事 务 系统 保障 了 即便 发 生 了 这 种 粗暴 的 
打 断 ， 数 据 库 仍 然 保 持 一 致 的 状态 。 事 实 上 ， 事 务 太 重 要 了 ， 没 有 它 就 不 能 对 IndexedDB 做 任何 
操作 。 
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注意 ”为 了 理解 没有 事务 你 会 遇 到 的 问题 , 想象 一 下 你 正在 从 一 个 银行 账号 向 另 一 个 账号 转账 。 
在 事务 处 理 机 制 下 ， 第 一 步 ( 从 账号 A 转 出 金额 ) 和 第 二 步 ( 把 钱 存 入 账号 B ) 会 一 起 成 
功 或 失败 。 但 如 果 没 有 事务 ， 可 能 会 遭遇 一 个 不 那么 愉快 的 状况 : 从 账号 A 转 出 金额 成 
功 了 ， 但 将 金额 转 入 账号 B 却 失败 了 ， 导 致 了 严重 的 现金 丢失 问题 。 


(2) 为 事务 获取 对 象 存 储 。 

对 象 存 储 是 数据 表 的 一 个 别名 。 因 为 IndexedDB 数 据 表 中 的 每 一 条 数据 实际 上 都 是 一 个 数据 
对 象 ， 所 以 这 个 名 字 合 乎 情理 。 

(3) 调用 一 个 对 象 存 储 的 方法 。 

对 象 存储 是 所 有 数据 表 操 作 功 能 的 关键 。 比 如 ， 要 添加 一 条 数据 ， 需 调用 它 的 put() 方 法 。 
要 删除 一 条 数据 ， 需 调用 它 的 delete() 方 法 。 方 法 会 返回 一 个 请 求 对 象 ， 进 行 下 一 步 时 必须 用 到 
这 个 对 象 。 

(4) 处 理 成 功 和 错误 事件 。 

如 你 所 知 ， 事 实 上 IndexedDB 的 一 切 都 是 异步 的 。 如 果 想 要 在 一 个 操作 完成 时 做 一 些 事 ， 并 
且 想 要 在 问题 恶化 之 前 捕获 错误 ， 则 需要 处 理 onsuccess 和 onError 事 件 ， 就 像 前 文 介 绍 的 打开 数 
据 库 所 做 的 那样 。 

将 这 些 步 又 记 在 脑子 里 , 来 看 看 addLink() 函 数 的 代码 , 这 个 函数 会 在 用 户 点 击 Add Link 按 钮 
时 运行 。 

在 用 数据 库 之 前 ， 先 要 有 数据 。 在 链接 追踪 器 的 例子 中 , 代码 从 表单 中 获取 输入 的 数据 ， 然 
后 用 它 创建 一 个 LinkRecord 对 象 。 这 个 任务 是 基本 的 JavaScript 很 简单 ， 找 到 元 素 , 获取 相应 
的 值 ， 然 后 使 用 10.4.1 节 第 一 段 代 码 的 LinkRecord() 函 数 。 


function addLink() { 
// 从 表单 中 获取 数据 
var name = document.getElementById("name").value; 
var Url = document.getElementById("url").value; 
var description = document.getElementById("description").value; 
var notes = document.getElementById("notes").value; 
// 创 建 LinkRecord 对 象 
var linkRecord = new LinkRecord(name, url, description, notes); 


现在 , 可 以 按照 上 文 的 第 一 步 创 建 事务 ,调用 database.transaction() 方 法 并 提供 两 个 参数 ， 

var transaction = database.transaction(["Links"], "readwrite"); 

第 一 个 参数 是 所 有 需要 被 引入 这 个 事务 的 数据 表 的 列表 ， 这 个 信息 让 IndexedDB 可 以 锁定 数 
据 表 ， 以 阻止 其 他 代码 同时 产生 重奏 或 可 能 不 一 致 的 修改 。 技 术 上 来 讲 ， 这 个 参数 是 一 个 包含 了 
数据 表 名 称 的 数组 ， 这 也 是 为 什么 它 是 用 方 括号 括 起 来 的 。 但 在 这 个 例子 中 ， 只 有 一 个 数据 表 被 
引入 任务 中 。 

第 二 个 参数 是 一 个 指示 事务 类 型 的 字符 串 。 如 果 要 创建 一 个 可 以 对 数据 表 进 行 任 何 操作 的 事 
务 , 不 论 是 搬入 、 更 新 还 是 删除 数据 , 那 就 用 readwrite; 如 果 只 需要 读 取 数据 , 那 就 用 readonly。 
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接 下 来 是 第 二 步 ， 获 取 数 据 表 所 不 可 或 缺 的 对 象 存 储 。 可 以 简单 地 用 transaction. 
objectStore() 方 法 ， 只 需 提供 数据 表 的 名 称 ， 代 码 如 下 : 

var objectStore = transaction.objectStore("Links"); 

要 添加 一 条 数据 ， 使 用 对 象 存储 的 put() 方 法 并 传人 数据 对 象 : 

var request = objectStore.put(linkRecord); 

最 后 ， 需 要 人 处理 onError 和 onSuccess 事 件 来 确定 数据 是 否 添 加 成 功 : 


request.onerror = function(event) { 
alert(request.error + " occurred."); 











}; 

request.onsuccess = function(event) { 
// 数 据 已 添加 
// 刷 新 显示 (为 了 提高 性 能 ， 可 以 只 添加 一 个 新 项 目 ， 而 不 需 更 新 整个 列表 ) 
showLinks(); 

} 


} 


注意 ”如 果 调 用 put() 添 加 的 数据 与 已 存在 的 数据 有 相同 的 主 关键 字 ( 比如， 一 个 链接 的 URL 已 
存在 )， 浏 览 器 会 静默 地 用 新 数据 替换 已 存在 的 数据 。 


10.4.4 在 数据 表 中 查询 所 有 数据 


查询 是 获取 存储 信息 的 基本 工作 。 挑 出 一 条 数据 , 检索 一 组 符合 特定 条 件 的 数据 , 或 毅 历 数 
据 表 中 的 所 有 数据 ， 随 你 喜欢 。 

链接 追踪 屁 执 行 了 一 次 完整 的 数据 表 浏 览 和 一 个 单条 数据 的 检索 。 它 用 数据 表 浏 览 创建 了 链 
接 添加 表单 下 方 的 链接 列表 。 当 点 击 列表 中 的 Details 链 接 时 ， 它 用 数据 检索 来 获取 一 个 指定 网 站 
的 详细 信息 ， 我 们 很 快 会 介绍 。 

第 一 个 任务 更 复杂 一 些 。 这 是 因为 需要 一 个 游标 来 浏览 一 个 IndexedDB 数 据 表 。( 数据 库 游 标 
是 一 个 追踪 你 在 数据 表 中 当前 位 置 的 对 象 ， 可 以 让 你 逐条 访问 数据 。) 

首先 , 创建 一 个 事务 并 获取 对 象 存储 。 这 一 次 ,不 需要 做 任何 修改 , 所 以 一 个 只 读 事 务 就 够 
用 了 : 


function showLinks() { 
var transaction = database.transaction(["Links"], "readonly"); 


var objectStore = transaction.objectStore("Links"); 
接 下 来 ,用 存储 对 象 的 openCursor() 方 法 创建 游标 : 
var request = objectStore.openCursor(); 
然后 , 给 我 们 熟悉 的 onError 和 onsuccess 事 件 添加 回调 处 理 需 。onError 事 件 处 理 需 没什么 特别 的 : 


request.onerror = function(event) { 
alert(request.error + " occurred."); 
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onSuccess 事 件 处 理 需 更 有 趣 一 点 ， 它 需要 逐步 访问 Links 数 据 表 中 的 数据 。 当 它 遍 历时 ， 会 
用 链接 列表 创建 一 个 HTML 字 符 串 。 
// 准 备 要 插入 页 面 的 字符 事 


var markupToInsert = ""; 





request.onsuccess = function(event) { 
// 创 建 一 个 游标 
Var cursor = event.target.result; 


作为 初始 值 ， 游 标定 位 在 数据 表 的 第 一 条 数据 ， 如 果 有 的 话 。 通 过 检测 游标 的 值 是 true 还 
false 来 检测 是 否 有 数据 。 如 果 是 true， 则 有 可 访问 的 数据 。 可 以 通过 cursor.value 属 性 访问 到 这 
条 数据 ， 代 码 如 下 : 


if (cursor) { 
var linkRecord = cursor.value; 


数据 会 以 对 象 的 形式 返回 ,在 链接 追踪 器 的 例子 中 , 每 条 记录 都 是 一 个 如 假 包 换 的 LinkRecord 
对 象 ， 完 整地 包含 了 10.4.1 节 对 象 定义 函数 中 的 name 、url1、description 以 及 notes 属 性 。 

获取 到 对 象 后 ， 怎 么 处 理 它 就 由 你 决定 了 。 在 当前 例子 中 ,代码 用 LinkRecord 数 据 构建 了 一 
个 <a> 元 素 。 它 用 网 站 名 称 作为 链接 文本 ， 用 URL 作 为 链接 地 址 ， 代 码 如 下 : 


markupToInsert += "<a href=" + linkRecord.url + ">" + linkRecord.name + "</a>"; 


现在 ，<a> 保 存在 变量 markupToInsert 中 。 当 代码 完成 了 对 数据 库 中 每 个 LinkRecord 的 检查 ， 
并 将 它们 的 信息 都 添加 到 markupToInsert 变 量 之 后 ， 就 可 以 把 这 段 HTML 代 码 复制 到 页 面 中 了 。 

在 每 一 条 链接 后 面 添加 两 个 可 点 击 的 文本 之 后 , 链接 跟踪 髓 变 得 更 高 级 了 。 一 个 是 “Detail”， 
另 一 个 是 “Delete”， 可 以 在 图 10-7 中 看 到 ( 在 屏幕 的 最 底部 )。 

这 些 文本 看 起 来 像 普通 的 链接 , 但 实际 上 它们 是 <span> 元 素 , 并 写 死 了 点 击 时 调用 另外 两 个 
页 面 中 的 函数 (getLinkDetails 和 deleteLink )。 下 面 是 创建 这 两 个 cspan> 的 代码 : 


markupToInsert += "(" + 
"<span class="'linkButton' data-url="" + linkRecord.url + 
'' onclick="'getLinkDetails(this)'>Details</span>" + " "+ 
"<span class=']inkButton” data-url="" + linkRecord.url + 
'' onclick="'deleteLink(this)'>Delete</span>" + 
")<br>"; 


这 里 有 个 小 技巧 ,Details 和 Delete 触 发 需 是 <span> 元 素 。 简 单 起 见 ， 对 应 元 素 的 URL 用 一 个 
属性 保存 在 每 个 cspan> 元 素 中 。 这 样 , 当 点 击 一 个 触发 器 时 ,代码 可 以 迅速 获取 URL 并 用 它 在 Links 
数据 表 中 查找 对 应 的 数据 。 





并 

































































注意 ”按照 HTML5 的 惯例 , 保存 URL 的 属性 名 称 是 data-url。data- 前 级 表明 要 用 这 个 属性 保存 
自 定义 数据 ,浏览 器 可 以 忽略 。 属 性 名 剩 下 的 部 分 可 以 是 任何 你 想 要 的 这 里 ， 用 url 
更 合理 ， 因 为 这 个 属性 是 用 来 保存 URL 的 。 
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到 目前 为 止 , 我 们 已 经 介绍 了 代码 如 何在 检索 时 处 理 一 个 单条 数据 。 当 准备 好 访问 下 一 条 数 
据 时 ,可 以 调用 cursor.continue() 方 法 。 但 是 , 不 要 试图 处 理 更 多 数据 ,这 是 因为 逐步 访问 数据 
是 一 个 异步 操作 。 当 游标 到 达 下 一 条 数据 时 ，onsuccess 事 件 再 一 次 触发 ， 同 样 的 代码 又 执行 一 
次 ， 这 时 可 以 为 下 一 条 数据 添加 HTML 代码 ， 如 果 它 存在 的 话 。 

cursor.continue(); 

} 

当 到 达 数 据 表 的 最 后 一 条 数据 时 ， 游 标的 值 会 变 为 false。 这 时 ， 就 可 以 把 HTML 代 码 复 制 
到 页 面 中 了 : 























else { 
// 如 果 一 个 结果 也 没有 ， 用 就 用 占 位 符 文 本 代替 
if (markupToInsert == "") { 
markupToInsert = "<< No links. >>"; 
} 
else { 
markupToInsert = "<i>Links you've added so far: </i><br>" + 
markupToInsert; 
} 
// 插 入 代码 


var resultsElement = document.getElementById("links"); 
resultsElement.innerHTML = markupToInsert; 


} 
}; 
} 


10.4.5 ”查询 单条 数据 


在 数据 表 中 查询 单条 数据 比 获取 全 部 数据 要 简单 ， 因 为 不 会 被 游标 弄 得 一 片 混乱 。 因 此 ， 只 
需 按 照 10.4.3 节 中 介绍 的 固定 4 步 程 序 ， 使 用 对 象 存储 的 get () 方 法 。 

如 果 点 击 链接 追踪 器 例子 中 的 一 个 “Details” 链 接 ， 就 会 执行 下 面 的 代码 。 它 获取 对 应 的 
LinkRecord 对 象 并 解析 这 个 对 象 的 全 部 信息 。 


function getLinkDetails(element) { 
// 从 之 前 添加 的 data-url 属 性 中 获取 这 个 链接 的 URL 
// earlier. 
var url = element.getAttribute("data-url"); 








database.transaction(["Links"], "readonly"); 
transaction.objectStore("Links"); 


var transaction 
var objectStore 





// 找 到 拥有 这 个 URL 的 数据 
var request = objectStore.get(ur]); 


request.onerror = function(event) { 
alert(request.error + " occurred."); 
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request.onsuccess = function(event) { 
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var linkRecord = request.result; 

var resultsElement = document.getElementById("linkDetails"); 

resultsElement.innerHTML = "<b>" + linkRecord.name + "</b><br>" + 
"<b>URL:</b> ”+ linkRecord.ur] + "<br>" + 
"<b>Description:</b> ”+ linkRecord.description + "<br>" + 
"<b>Notes:</b> " + linkRecord.notes; 

} 

} 


LinkRecord 对 象 中 的 信息 用 来 创建 一 个 HTML 代 码 片段 ， 它 随后 会 插入 页 面 中 链接 列表 下 面 





的 一 个 独立 的 容 需 中 ， 图 10-8 展 示 了 结果 。 


























= 本 到 图 10-8: 点 击 Details 

Favorite Site Tracker 2 | 

et 一 | 时， 代码 会 获取 对 

CG QQ FavoriteSiteTrackerhtml 三 ee - 3 
Name of the site: ~ 应 的 数据 并 显示 在 
立 |R BR 号 

URL (web address): 底 部 容器 中 
Description: 


Why you like it: 


Add Link Show Links 


Links you've added so far: 
http:/ /oreilly.com/missingmanuals/ (Detiails Delete) 
The HTNML5 Try Out Site (Details Delete} 








http://oreilly.com/missingmanuals/ 

URL: Missing Manuals 

Description: The O'Reilly Missing Manuals site 

Notes: Go here for information about upcoming books, downloads, the 
occasional video, and other goodness. 




















10.4.6 ”删除 一 条 数据 





现在 ， 你 已 经 熟悉 了 支撑 着 所 有 数据 操作 的 4 个 步骤。 删除 一 条 数据 没有 什么 不 同 。 很 简单 ， 





用 对 象 存储 的 delete() 方 法 。 


在 链接 追踪 铝 例 子 中 ,“Delete” 链 接 用 来 执行 删除 操作 。 点 击 之 后 ,就 会 删除 匹配 这 个 URL 





的 LinkRecord 对 象 ， 代 码 如 下 : 


function deleteLink(element) { 
var Url = element.getAttribute("data-url"); 
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var transaction = database.transaction(["Links"], "readwrite"); 
var objectStore = transaction.objectStore("Links"); 


var request = objectStore.delete(ur]); 


request.onerror = function(event) { 
alert(request.error + " occurred."); 


}; 


request.onsuccess = function (event) { 
// 已 删除 数据 
// 刷 新 显示 
showLinks(); 
} 
} 


我 们 已 经 介绍 了 IndexedDB 中 数据 操作 的 主要 方法 , 介绍 了 如 何 用 对 象 存 储 添 加 或 更 新 ( 用 
put() 方 法 ) 以 及 删除 (用 delete ) 数据 ,还 介绍 了 如 何 通过 关键 字 的 值 获取 单条 数据 ( 用 get )， 
或 者 浏览 全 部 数据 ( 用 openCursor )。 如 果 想 要 深入 了 解数 据 库 ， 可 以 在 http://tinyurl.com/ 
objectstore 查 看 Mozilla 关 于 对 象 存 储 的 文档 ,或 者 在 www.w3.org/TR/IndexedDB 上 查阅 详细 的 
IndexedDB 标 准 。 



































10.4.7 ”浏览 器 对 IndexedDB 的 支持 情 ; 


IndexedDB 是 一 个 相对 较 新 的 标准 ， 相 对 较 新 的 浏览 器 才 会 支持 。 
表 10-2 展 示 了 当前 的 支持 情况 。 


表 10-2 浏览 器 对 IndexedDB 的 支持 情况 
IE Firefox Chrome Safari Opera SafariiOS Android 版 Safari 
最 低 版 本 10 10 23 = 15 29 


很 遗憾 ， 还 没有 桌面 版 或 移动 版 的 Safari 支 持 IndexedDB。 这 个 支持 的 空白 是 因为 Safari 的 开 
发 者 们 还 在 使 用 已 废弃 的 Web SQL Database 标 准 。 如 果 需 要 Safari 支 持 ， 可 以 用 一 个 将 IndexedDB 
操作 转化 为 对 应 的 Web SQL 命令 的 腻子 脚本 ( 可 以 在 http:/tinyurLcom/DBpolyfill 下 载 ), 但 如 果 想 
要 一 个 不 支持 IndexedDB 和 Web SQL 的 浏览 器 支持 IndexedDB ， 比 如 IE9 或 IE8， 没 戏 ! 
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离线 应 用 


访问 网 站 ,得 先 上 网 。 这 一 点 连 三 岁 小 孩 都 知道 。 那 为 什么 还 要 用 一 章 来 讲 离线 应 用 呢 ? 
离线 应 用 的 想法 看 起 来 太 不 合适 时 家 了。 毕竟 ，Web 应 用 已 经 超越 几 代 离 线 桌面 应 用 ， 
成 为 了 世界 的 潮流 。 很 多 事 ， 比 如 实时 掌握 卡 戴 珊 的 最 新 动态 ， 或 者 订购 一 把 办 公 椅 ， 必 须 随时 
在 线 才 有 可 能 。 不 过 别 忘 了 ， 就 算是 Web 应 用 也 不 可 能 永远 不 掉 线 。 而 在 电脑 短暂 断 网 的 情况 下 ， 
它们 应 该 能 够 正常 工作 。 换 句 话说， 一 个 实用 的 离线 Web 应 用 可 以 应 付 间 歇 性 的 网 络 中 断 。 
对 于 使 用 智能 手机 和 平板 的 用 户 来 说 ， 离 线 应 用 尤其 重要 。 为 了 把 问题 说 明白 ， 让 我 们 看 一 
个 例子 。 假 设 你 在 使 用 一 个 Web 应 用 的 时 候 恰 好 通过 一 条 隧道 。 一 进 隧道 ， 你 就 看 到 了 一 个 错误 
页 面 ， 之 前 做 过 的 工作 全 部 丢失 。 等 出 了 隧道 之 后 ， 你 必须 全 部 从 头 来 过 。 但 是 ， 如 果 这 个 Web 
应 用 支持 离线 功能 , 那么 你 就 不 会 有 这 种 痛 蔡 的 经 历 了 。 虽然 部 分 功能 可 能 会 暂时 不 能 用 , 但 你 
不 会 被 迫 退 出 。( 当然 ， 有 些 隧 道 可 能 会 很 长 ， 而 真正 做 得 好 的 离线 Web 应 用 能 保证 乘 三 个 小 时 
飞机 不 间断 ， 如 果 你 需要 ,甚至 到 刚果 旅行 三 个 星期 都 没 问 题 。 说 到 底 ， 就 是 离线 多 长 时 间 都 不 
应 该 出 问题 。) 
使 用 HTML5 的 离线 应 用 功能 ， 能 把 普通 的 网 页 转变 成 基于 Web 的 “迷你 应 用 ”"。 如 果 再 结合 
大 量 的 JavaScript、 第 10 章 介绍 的 数据 存储 功能 和 第 12 章 将 要 介绍 的 服务 端 通信 功能 , 那 这 个 “ 迷 
你 应 用 ”就 几乎 像 智能 手机 和 平板 电脑 上 的 原生 应 用 一 样 自给 自足 ， 一 样 强大 。 
本 章 介绍 怎么 把 网 页 (或 一 组 网 页 ) 转换 成 离线 应 用 。 此 外 , 还 会 介绍 如 何 获悉 网 站 可 用 或 
者 网 站 离线 ， 以 便 作出 相应 处 理 。 















































什么 时 候 考 虑 离线 

该 不 该 让 我 的 网 页 支持 离线 浏览 呢 ? 

离线 应 用 并 不 适合 所 有 网 页 。 比 如 ,把 查询 股票 报价 的 网 页 转换 成 离线 应 用 毫 无 意义 ， 因 
为 这 个 页 面 存在 的 唯一 价值 就 是 能 够 连接 Web 服务 器 更 新 数据 。 不 过 ， 如 果 是 一 个 股票 分 析 
页 面 ， 那 么 下 载 一 批 数据 后 ， 即 使 离线 也 可 以 生成 图 表 或 分 析 报 告 。 这 样 ， 在 能 上 网 时 把 数据 
下 载 下 来 ， 即 使 进 了 隧道 也 不 妨碍 你 更 改选 项 或 单 击 按钮 。 

离线 功能 也 适合 那些 具有 交互 性 和 有 状态 的 网 页 ， 也 就 是 动用 大 量 JavaScript 代码 在 内 存 
中 维护 很 多 信息 的 网 页 。 这 些 网 页 本 身 就 可 以 实现 很 多 功能 ， 因 此 支持 离线 就 有 意义 。 不 过 ， 
其 中 某 个 网 页 突然 丢掉 连接 的 代价 也 更 大 。 想 象 一 下 ,用户 在 执行 一 项 复杂 的 任务 时 ， 突 然 中 
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断 任务 怎 能 不 让 人 觉得 讨厌 呢 ? 虽然 包含 简单 内 容 的 网 页 没 多 大 必要 做 成 离线 的 ,但 浏览 器 中 
的 字 处 理工 具 显 然 需要 离线 支持 。 事 实 上 , 这 样 的 离线 应 用 处 必 恰恰 能 够 取代 功能 更 完善 的 桌 
面 软件 。 

另外 , 还 要 考虑 用 户 。 如 果 有 些 用 户 不 可 能 经 常 上 网 , 或 者 可 能 会 通过 移动 设备 访问 应 用 
(比如 为 平板 电脑 设计 的 地 图 应 用 ),， 那么 支持 离线 功能 就 是 必要 的 。 如 果 情 况 并 非 如 此 ， 那 么 
考虑 离线 只 会 自 寻 烦恼 。 


11.1 通过 描述 文件 缓存 资源 


离线 应 用 的 一 项 基本 技术 就 是 缓存 , 即 下 载 文件 ( 如 网 页 ) 并 在 用 户 计算 机 上 保存 一 份 副本 。 
有 了 这 份 副 本 ,即使 计算 机 不 能 上 网 , 浏览 如 也 可 以 使 用 缓存 的 文件 。 当 然 , 缓存 不 限于 页 面 文 
件 一 一 样式 文件 、JavaScript 文 件 、 图 片 、 字 体 文件 以 及 任何 页 面 执 行 时 所 需要 的 资源 。 

要 创建 一 个 离线 应 用 ， 需 要 完成 三 步 ， 下 面 是 一 个 概述 。 

(1) 创建 描述 文件 。 

描述 文件 ( manifestfile ) 是 一 种 特殊 文件 ,告诉 浏览 器 保存 什么 文件 ,不 保存 什么 文件 ， 以 
及 用 什么 文件 代替 其 他 文件 。 描 述 文件 中 列 出 的 所 有 需要 缓存 的 内 容 ， 构 成 了 所 谓 的 离线 应 用 。 

(2) 修改 网 页 ， 引 用 描述 文件 。 

引用 了 描述 文件 ， 浏 览 带 在 请 求 页 面 时 就 会 下 载 描述 文 件 。 

(3) 配置 Web 服 务 器 。 

这 一 步 最 重要 ， 因 为 Web 服 务 右 必 须 以 正确 的 MIME 类 型 提供 描述 文件 。 稍 后 我 们 会 介绍 影 
响 缓 存 的 其 他 问题 。 

接 下 来 的 几 节 ， 我 们 就 分 别 讲解 这 几 个 步骤 。 
































传统 缓存 与 离线 应 用 
对 Web 开 发 而 言 ， 缓 存 并 非 新 事物 。 浏 览 器 经 常 利 用 缓存 以 避免 下 载 相同 的 文件 。 毕 竞 ， 


1A 


如 果 很 多 网 页 共用 相同 的 样式 表 ， 那 为 什么 每 个 页 面 都 下 载 多 次 呢 ? 不 过 , 浏览 器 的 这 种 缓存 
方式 与 离线 应 用 的 缓存 方式 可 不 一 样 。 

触发 浏览 器 中 传统 缓存 的 机 制 是 Web 服 务 器 发 送 额外 的 信息 ， 即 cache-control 头 部 ， 这 个 
信息 随同 浏览 器 请 求 的 文件 一 块 发 给 浏览 器 。 头 部 信息 告诉 浏览 器 是 否 应 该 缓存 该 文件 ,缓存 
多 长 时 间 再 询问 Web 服 务 器 该 文件 是 否 更 新 过 。 一 般 来 说 ， 缓 存 网 页 的 时 间 比 较 短 ， 而 缓存 网 
页 资源 ( 如 样式 表 、 图 片 和 脚本 ) 的 时 间 比 较 长 。 

相对 而 言 ， 离 线 应 用 由 一 个 单独 的 文件 ( 即 描 述 文 件 ) 控制 ， 也 不 限定 时 间 。 大 致 来 说 ， 
它 的 规则 是 “如 果 网 页 是 离线 应 用 的 一 部 分 ， 如果 浏 览 器 已 经 缓存 了 该 应 用 ， 如果 应 用 的 定义 
没有 改变 ， 那 么 就 使 用 缓存 的 网 页 ”。 作 为 Web 开 发 人 员 ， 可 以 声明 一 些 例外 ， 告 诉 浏览 器 不 
缓存 某 些 文件 ， 或 者 不 用 某 个 文件 替代 另 一 个 文件 。 但 是 ， 不 用 考虑 过 期 时 间 和 其 他 一 些 烦琐 
的 细节 。 
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11.1.1 创建 描述 文件 


描述 文件 是 HTML5S 离 线 应 用 功能 的 关键 所 在 。 描 述 文件 就 是 一 个 文本 文件 ， 其 中 列 出 了 需 
要 缓存 的 文件 。 

描述 文件 第 一 行 一 定 是 “CACHE MANIFEST”( 全 部 大 写 ): 

CACHE MANIFEST 

然后 ,再 列 出 需要 缓存 的 文件 。 比 如 ,下 面 的 代码 表示 缓存 两 个 网 页 ( 即 9.2.4 节 的 人 格 测试 
应 用 的 两 个 页 面 ): 

CACHE MANIFEST 























PersonalityTest.html 
PersonalityTest Score.html 


文件 中 的 空格 ( 包括 上 面 的 空 行 ) 是 可 选 的 ， 可 以 根据 需要 添加 。 





注意 ” 别 写 错 了 。 如 果 写 了 一 个 不 存在 的 文件 ， 浏 览 器 会 忽略 整个 描述 文件 。 





为 了 离线 应 用 的 正常 运行 ,浏览 器 必须 缓存 其 所 需 的 一 切 , 包括 网 页 和 网 页 用 到 的 资源 ( 脚 
本 、 图 片 、 样 式 表 和 骨 入 的 字体 )。 下 面 这 个 示例 描述 文件 列 出 了 所 有 相关 的 资源 : 

CACHE MANIFEST 

# pages 

PersonalityTest.html 

PersonalityTest Score.html 





# styles & scripts 
PersonalityTest.css 
PersonalityTest.js 


# pictures & fonts 
Images/emotional bear.jpg 
Fonts/museo_slab 500-webfont.eot 
Fonts/museo_slab 500-webfont.woff 
Fonts/museo_slab 500-webfont.ttf 
Fonts/museo_slab 500-webfont.svg 


关于 这 个 文件 有 两 点 要 注意 。 首 先 ， 以 # 开 头 的 行 是 注释 ， 说 明 下 面 缓存 哪些 内 容 。 其 次 ， 
有 些 资 源 位 于 子 目录 下 ( 比如 emotional bearjpg， 位 于 Images 文 件 夹 中 )。 只 要 这 些 目录 与 Web 服 
务 器 中 的 目录 对 应 , 而 且 浏 览 器 能 够 访问 到 该 目录 , 就 可 以 像 这 样 把 它们 作为 离线 应 用 的 一 部 分 
缓存 下 来 。 

复杂 的 网 页 一 般 都 需要 很 多 支持 文件 ， 因 此 描述 文件 也 会 很 长 很 复杂 。 因 此 , 最 忌讳 的 问题 
是 拼写 错误 ,一 个 文件 名 写 错 ， 就 会 导致 整 个 离线 应 用 无 法 运行 。 不 久 的 将 来 ，Web 编 辑 咒 等 工 
具 可 以 帮 我 们 减少 这 种 麻烦 。 它们 可 以 根据 选中 的 网 页 自动 创建 描述 文件 , 同时 为 修改 和 维护 描 
述 文件 提供 辅助 功能 。 
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提示 “有 时 候 ， 可 能 不 必 缓 存 一 些 很 大 但 又 不 重要 的 资源 。 比 如 ， 大 照片 或 大 的 横幅 广告 。 不 
过 ， 假 如 缺少 这 些 文 件 会 影响 页 面 呈 现 (比如 导致 错误 消息 、 奇 怪 的 页 面 空白 或 布局 凌 
乱 )， 那 应 该 使 用 JavaScript 在 用 户 离线 时 调整 页 面 ，11.2.3 节 将 介绍 如 何 检测 用 户 设置 是 
否 在 线 。 





准备 好 描述 文件 后 ， 可 以 把 它 保存 在 网 站 根 目录 下 ，, 与 其 他 网 页 放 在 一 起 。 描 述 文件 的 名 字 
可 以 随便 起 , 虽然 应 该 用 .appcache ( 比如 PersonalityTest.appcache ), 但 其 他 文件 扩展 名 也 可 以 ( 比 
如 ，HTML5 诞 生 之 初 一 些 开发 者 用 .manifest ), 而 最 新 版 的 HTML5 标 准 推荐 用 .appcache 。 最 重要 
的 还 是 在 Web 服 务 器 上 进行 配置 ， 让 它 能 够 认识 扩展 名 。 如 果 你 有 权限 设置 Web 服 务 器 ， 可 以 根 
据 11.1.3 节 的 介绍 完成 配置 。 如 果 没 有 权限 ,可 以 问 一 问 主机 托管 公司 , 看 他 们 配置 了 什么 扩展 名 
来 支持 描述 文件 。 

















不 要 缓存 有 查询 字符 串 的 页 面 
查询 字符 串 是 URL 尾 部 额外 的 一 些 信 息 ， 由 一 个 问号 分 隔 。 通 常 ， 查 询 字 符 串 用 来 在 页 面 
间 传 递 信息 。 比 如 ， 人 格 测 试 例 子 原 来 的 版 本 用 查询 字符 串 将 人 格 测试 得 分 从 PersonalityTest. 
html 传 递 到 PersonalityTest Score.html。 当 在 第 一 个 页 面 填 完 多 选 题 并 点 击 Get Score 时 ， 浏 览 器 
会 跳 转 到 像 下 面 这 样 的 一 个 URL: 
http://prosetech.com/html5/PersonalityTest_ 
Score.html?e=-10&a=-5&C=10&n=5&0=20 
那么 问题 来 了 ， 在 HIML5S 缓 存 系统 机 制 中 , PersonalityTest_Score.html 和 PersonalityTest_ 
Score.html?e=-10&a=-5S&c=10&n=5&o=20 是 两 个 不 同 的 请 求 。 根 据 描 述 文件 ， 第 一 个 页 面 被 组 
存 了 。 但 第 三 个 URL 相 当 于 指向 了 一 个 完全 不 同 的 页 面 , 除非 将 页 面 名 称 和 完整 的 查询 字符 串 
添加 到 描述 文件 中 , 否则 它 是 不 会 被 缓存 的 。 因 为 不 太 可 能 把 每 种 得 分 组 合 的 URL 都 写 进 描 述 
文件 ， 所 以 也 不 太 可 能 缓存 带 有 查询 字符 串 的 PersonalityTest Score.html 页 面 。 
要 避免 这 个 问题 , 不 要 同时 使 用 缓存 和 查询 字符 串 。 比如， 如 果 想 要 给 人 格 测试 例子 添加 
缓存 ， 可 以 用 把 得 分 存在 本 地 存储 的 版 本 ( 11.1.1 节 所 用 的 示例 版 本 )。 








11.1.2 ”使 用 描述 文件 
只 是 创建 描述 文件 可 不 行 ， 还 必须 让 浏览 器 知道 它 在 哪里 。 换 句 话 说 , 你 得 在 自己 的 网 页 中 
引用 它 。 为 此 ,要 为 chtml> 元 素 添 加 manifest 属 性 , 将 该 属性 的 值 设置 为 描述 文件 的 路 径 ， 比 如 : 


<!DOCTYPE htm]> 
<html lang="en”manifest="PersonalityTest.manifest"> 




















而 且 ， 必须 给 离线 应 用 包含 的 每 个 页 面 都 添加 同样 的 属性 。 在 前 面 的 例子 中 , 也 就 是 要 修改 
两 个 文件 : PersonalityTest,html 和 PersonalityTest Score.html。 
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注意 ”一 个 网 站 可 以 有 任意 多 个 离线 应 用 ， 每 个 应 用 分 别 有 自 己 的 描述 文件 即 可 。 离 线 应 用 也 
可 以 使 用 相同 的 资源 ( 比如 样式 表 )， 但 必须 包含 不 同 的 网 页 。 


11.1.3 ”把 描述 文件 放 到 Web 服 务 器 


测试 描述 文件 的 时 候 需要 一 些 耐 心 ， 任 何 微小 的 问题 都 可 能 导致 静默 失败 ， 结 束 缓存 过 程 。 
同样 ， 在 适当 的 时 候 也 要 试 试看 ， 看 你 的 离线 应 用 是 否 真 能 在 不 联网 的 情况 下 运行 。 

说 到 测试 ， 从 本 地 硬盘 加 载 文件 当然 不 行 ， 必 须 得 把 应 用 上 传 到 服务 器 (或 者 使 用 本 机 运行 
的 测试 服务 器 ， 比 如 Windows 自 带 的 IIS )。 

测试 离线 应 用 的 步骤 如 下 。 

(1) 确认 已 经 配置 好 Web 服 务 器 , 使 用 text/cache-manifest 的 MIME 类 型 来 解析 描述 文件 (通常 ， 
这 些 文件 的 扩展 名 为 .appcache ) 。 

如 果 Web 服 务 器 以 其 他 MIME 类 型 ( 包括 纯 文本 ) 交付 描述 文件 , 浏览 器 都 会 忽略 描述 文件 。 
































注意 不 同 的 Web 服 务 器 配置 MIME 类 型 的 方式 也 不 一 样 。 如 果 你 对 这 一 块 不 熟悉 ， 可 以 找 服务 
器 厂商 咨询 ， 或 找 一 个 熟悉 Web 服 务 器 配置 的 朋友 帮 你 设置 MIME 类 型 ( 第 1 步 )， 同 时 修 
改 缓 存 设 置 (第 2 步 )。 要 了 解 有 关 MIME 类 型 的 更 多 信息 ,请 参考 5.3.1 节 ， 那 里 还 用 一 个 
例子 介绍 了 如 何 通过 一 个 Web 服 务 器 账号 添加 新 的 MIME 类 型 。 


(2) 考虑 在 使 用 描述 文件 时 关闭 传统 缓存 机 制 (参见 11.1 节 开头 )。 

这 样 做 的 原因 是 ，Web 服 务 器 可 能 会 告诉 浏览 器 把 描述 文件 缓存 一 段 时 间 ， 就 像 告 诉 它 缓存 
其 他 文件 一 样 。 这 种 做 法 无 可 厚 非 ,但 却 可 能 给 测试 带 来 极 大 的 难题 。 假 设 你 后 来 又 更 新 了 描述 
文件 ,但 浏览 器 仍然 会 使 用 缓存 的 旧 描 述 文件 ， 于 是 离线 应 用 也 将 继续 使 用 以 前 缓存 的 网 页 。 
(Firefox 特 别 喜欢 使 用 过 时 的 描述 文件 ,很 讨厌 。) 为 了 避免 这 一 点 ， 应 该 配置 Web 服 务 嚣 ， 让 它 
告诉 浏览 器 永远 不 要 缓存 描述 文件 。 

还 有 , 每 个 服务 器 软件 都 有 自己 的 配置 机 制 , 但 本 质 上 还 是 告诉 服务 器 收 到 .appcache 文 件 的 
请 求 时 返回 一 个 无 缓存 的 请 求 头 。 

(3) 在 支持 离线 应 用 的 浏览 器 中 打开 网 页 。 事 实 上 所 有 浏览 器 都 支持 ， 除 了 旧版 的 下 
需要 IE10 及 其 更 新 的 版 本 。 

浏览 器 在 打开 使 用 了 描述 文件 的 网 页 时 ,可 能 会 请 求 用 户 的 许可 , 之 后 再 下 载 文件 。 移 动 设 
备 通常 会 请 求 用 户 的 许可 ， 因 为 设备 本 身 的 存储 空间 有 限 。 桌 面 浏 览 絮 则 不 一 定 ， 比 如 Firefox 
会 (如 图 11-1 所 示 )， 而 Chrome 、IE 和 Safari 不 会 。 
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写 昌 三 呈 | 图 11-1; Firefox 会 在 加 载 包 含 描述 文件 
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件 。 随 后 再 浏览 此 网 页 ， Firefox 会 检测 
昔 述 文件 是 否 有 更 新 ,如 果 有 更 新 则 自 
动 下 载 新 文件 而 不 会 再 请 求 授权 
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一 。 一 上 办 1" = 














用 户 同意 之 后 (或 者 浏览 器 没有 问 )， 缓 存 过 程 就 会 开始 。 浏 览 器 会 下 载 描述 文件 ， 然 后 再 
下 载 描述 文件 中 列 出 的 所 有 文件 。 这 个 下 载 过 程 是 在 后 台 进 行 的 , 不 会 影响 当前 页 面 。 就 如 同 浏 
览 絮 下 载 大 图 片 或 下 载 视频 一 样 ， 同 时 会 显示 页 面 的 其 他 部 分 。 

(4) 模拟 离线 。 

如 果 你 测试 的 是 远程 服务 器 ,那么 断 开 网 络 连接 。 如 果 是 在 本 地 Web 服 务 器 〈 即 运行 在 你 的 
计算 机 中 的 服务 器 ) 中 测试 ， 停 止 网 站 ( 参见 图 11-2 )。 
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(5) 浏览 离线 应 用 中 的 某 个 页 面 ， 然 后 刷新 。 

通常 ， 在 单 击 Refresh 或 Reload 时 ,浏览 絮 总 是 会 尝试 访问 Web 服 务 器 。 如 果 你 请 求 的 是 
一 个 普通 页 面 ， 并 且 这 时 已 经 断 开 连 接 ， 那么 请 求 会 失败 。 可 是 ， 如 果 你 请 求 的 是 离线 应 用 
中 的 一 个 页 面 ， 浏 览 器 则 会 从 缓存 中 找到 该 页 面 ， 悄 悄 地 代替 之 前 的 页 面 。 此 时 ， 单 击 链接 
可 以 自由 跳 转 。 如 果 你 单 击 了 不 属于 离线 应 用 的 页 面 ， 则 会 看 到 熟悉 的 “服务 器 没有 响应 ” 
的 错误 消息 。 
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我 的 离线 应 用 离线 不 工作 
离线 应 用 功能 还 不 是 很 稳定 并 且 有 点 诡 蜡 , 一 个 小 小 的 错误 就 会 导致 它 不 能 工作 。 如 果 你 
按照 上 面 列 出 的 步骤 做 了 ， 但 在 尝试 访问 离线 页 面 时 还 是 看 到 了 “服务 器 没有 响应 ”的 消息 ， 
可 以 试 着 排除 以 下 常见 的 问题 。 
口 下 载 描述 文件 出 了 问题 。 如 果 你 没有 把 描述 文件 放 在 正确 的 位 置 , 或 者 说 浏览 器 没有 找 
到 它 ， 那 么 出 问题 是 自然 的 。 但是， 以 正确 的 MIME 类 型 (参见 5.3.1 节 ) 来 提供 描述 文 
件 也 同样 重要 。 
口 下 载 描述 文件 中 列 出 的 文件 出 了 问题 。 比 如 , 描述 文件 中 包含 一 个 不 存在 的 图 片 。 或 者 ， 
要 求 浏览 器 下 载 Web 字 体 文件 ， 但 该 字体 文件 的 类 型 又 是 Web 服 务 器 所 不 支持 的 。 无 论 
如 何 ， 只 要 浏览 器 下 载 一 个 文件 时 失败 ， 它 也 会 完全 放弃 ( 同时 删除 已 经 下 载 的 所 有 数 
据 )。 为 避免 这 个 问题 ， 先 从 简单 的 描述 文件 开始 尝试 ， 比 如 只 包含 一 个 网 页 ， 而 不 包 
含 其 他 资源 。 如 果 不 行 ， 再 查看 一 下 Web 服 务 器 的 上 日志， 看 浏览 器 到 底 请 求 了 什么 资源 
(这 样 就 能 知道 是 请 求 哪个 文件 出 错 导致 了 浏览 器 放弃 )。 
口 浏览 器 缓存 了 旧 的 描述 文件 。 浏 览 器 有 可 能 会 缓存 描述 文件 (根据 传统 的 Web 缓 存 规 
则 )， 因 此 忽略 更 新 的 描述 文件 。 如 果 你 发 现 有 些 网 页 的 确 是 被 缓存 的 ， 但 一 些 新 网 页 
却 没有 被 缓存 , 那 就 可 能 是 这 个 原因 。 解决 方案 是 手工 清空 浏览 器 缓存 ( 参见 11.1.5 节 )。 


11.1.4 更 新 描述 文件 


让 应 用 离线 工作 是 要 解决 的 第 一 个 难题 。 第 二 个 难题 是 更 新 离线 应 用 的 内 容 。 

就 拿 前 面 的 例子 来 说 吧 ， 它 缓存 了 两 个 页 面 。 如 果 你 更 新 了 PersonalityTesthtml1， 打 开 浏 览 

器 ， 重 新 加 载 这 个 页 面 ， 你 看 见 的 仍然 是 原先 缓存 的 那个 页 面 。 无 论 你 的 计算 机 目前 能 和 否 上 网 ， 

都 是 如 此 。 问 题 在 于 ， 只 要 浏览 器 缓存 了 应 用 ,那么 它 就 不 会 向 Web 服 务 器 请 求 新 内 容 。 浏 览 器 

不 管 你 是 否 更 新 了 服务 器 上 的 页 面 , 它 只 管用 自己 已 经 缓存 的 那个 ,由 于 离线 应 用 没有 过 期 一 说 ， 

所 以 无 论 你 过 多 长 时 间 以 后 再 看 ， 就 算是 几 个 月 以 后 再 看 ,浏览 器 照旧 还 会 忽略 更 新 后 的 页 面 。 

不 过 ， 浏 览 器 会 检测 服务 器 上 的 描述 文件 是 否 有 更 新 。 因 此 ， 可 以 保存 一 份 新 的 描述 文件 ， 

把 它 放 到 服务 器 上 ， 就 可 以 解决 这 个 问题 了 ， 对 吧 ? 

不 一 定 。 要 触发 浏览 器 更 新 缓存 的 应 用 ， 需 要 同时 满足 下 列 要 求 。 

口 浏览 器 没有 缓存 描述 文件 。 如 果 浏 览 嚣 在 本 地 缓存 了 描述 文件 , 它 就 不 会 再 访问 Web 服 务 
器 去 找 新 描述 文件 。 在 是 否 缓存 描述 文件 这 个 问题 上 ， 不 同 浏览 器 有 不 同 的 处 理 方 式 。 
有 的 浏览 器 〈 比如 Chrome ) 只 要 有 条 件 就 会 检测 服务 器 ， 看 有 没有 更 新 的 描述 文件 。 但 
Firefox 却 遵循 着 传统 的 HTTP 缓 存 规 则 ， 会 将 描述 文件 缓存 一 段 时间 。 所 以 ， 为 了 减少 麻 
烦 ， 最 好 是 让 Web 服 务 器 明确 告诉 浏览 器 ， 不 要 缓存 描述 文件 (参见 11.1.3 节 )。 

口 描述 文件 的 保存 日 期 必须 是 新 的 。 浏 览 器 在 检测 服务 器 上 的 文件 时 ， 首 先 要 看 文件 的 最 
近 更 新 时 间 。 如 果 不 是 新 保存 的 描述 文件 ， 那 浏览 器 不 会 下 载 它 。 
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口 描述 文件 中 的 内 容 要 更 新 。 如 果 浏 览 器 下 载 了 新 描述 文件 ， 结 果 却 发 现 其 内 容 没 有 变化 ， 
它 同样 会 停止 更 新 ， 而 继续 使 用 之 前 缓存 的 内 容 。 这 一 点 虽然 不 太 合 乎 常理 ,但 却 很 有 
价值 。 你 想 ， 重 新 下 载 一 遍 本 来 就 已 经 缓存 的 内 容 ， 既 耽误 时 间 又 浪费 带宽 ， 所 以 浏览 
需 不 在 必要 时 是 不 会 下 载 的 。 
如 果 你 一 直 都 在 认真 领会 前 面 的 内 容 , 到 这 里 可 能 会 冒 出 一 个 问题 来 : 要 是 描述 文件 确实 没 
有 什么 好 改 的 〈 因为 你 并 没有 添加 任何 文件 )， 而 我 又 想 让 浏览 器 更 新 缓存 内 容 怎么 办 (因为 原 
有 的 文件 内 容 有 变化 ) ? 这 时 候 , 你 得 稍微 修改 一 下 描述 文件 , 让 它 看 起 来 像 是 新 的 一 样 。 为 此 ， 
最 好 的 办 法 就 是 添加 注释 ， 比 如 : 
CACHE MANIFEST 
# version 1.00.001 
# pages 
PersonalityTest.html 
PersonalityTest Score.html 






































# styles & scripts 
PersonalityTest.css 
PersonalityTest.js 


# pictures & fonts 
Images/emotional bear.jpg 
Fonts/museo_slab 500-webfont.eot 
Fonts/museo_slab 500-webfont.woff 


Fonts/museo slab 500-webfont.ttf 
Fonts/museo_slab 500-webfont.svg 


等 下 一 次 再 需要 浏览 需 更 新 缓存 时 ,只 要 把 这 个 例子 中 的 版 本 号 改 为 1.00.002 就 行 了 。 这 样 ， 
既 可 以 强制 让 浏览 带 更 新 已 有 内 容 ， 也 可 以 记录 自己 更 新 的 次 数 。 

更 新 并 不 会 瞬间 完成 。 浏 览 絮 发 现 新 描述 文件 后 , 会 悄悄 地 下 载 所 有 文件 , 然后 再 用 新 下 载 
的 文件 代替 原来 缓存 的 内 容 。 下 次 用 户 再 访问 同一 个 页 面 〈 或 刷新 该 页 面 )， 就 会 显示 新 内 容 。 
如 果 你 想 让 用 户 马上 就 切换 到 新 下 载 的 内 容 ， 可 以 使 用 11.2.4 节 介绍 的 JavaScript 技 术 。 





























注意 ”不 能 以 只 更 新 增 量 的 方式 更 新 离线 应 用 。 只 要 应 用 中 有 变化 ， 浏 览 器 就 会 抛弃 所 有 昌文 
件 ， 然 后 重新 下 载 一 遍 ， 包 括 丝毫 未 改 的 那些 文件 。 


清除 浏览 器 缓存 
测试 离线 应 用 时 ， 手 工 清除 浏览 器 缓存 的 作用 很 明显 。 这 样 ， 不 必修 改 描述 文件 ， 也 可 以 
测试 更 新 后 的 应 用 。 
所 有 浏览 器 都 提供 了 清除 缓存 的 命令 ， 但 却 把 它们 “ 藏 ”在 了 不 同 的 地 方 。 有 的 浏览 器 会 本 
记录 每 个 离线 应 用 使 用 的 空间 (参见 图 11-3 )。 这 些 信息 让 你 可 以 判断 哪个 应 用 缓存 失败 了 ， 
比如 没有 列 出 来 的 或 者 缓存 大 小 没有 预期 那么 大 的 。 当然 , 这 样 也 可 以 一 个 应 用 一 个 应 用 地 删 
除 缓 存 文件 ， 做 到 互 不 影响 。 
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The following websites have stored data for offline use: 





图 11-3: 上 , 在 Firefox 中 ， 
然后 选择 Network 选 项 卡 。 可 以 看 到 每 个 网 站 使 用 
s 间 ， 也 可 以 清除 任何 


选择 Options > Advanced， 





网 站 的 缓存 一 一 选 
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General Tabs Content Applications Privacy Securty Sync _ Advanced 
General | Network | Update Encryption| 的 缓存 空 
Connect tion 
Configure how Firefox connects to the Internet | Setting 
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| | Cancel | | Help 


























] AppCache Internals 上 9 


\ C © chromeyV/appcache-inl 


Remove this AppCache 


e Sizs- 43.7 kB 

» Creation Time: Tuesday, May 10, 201 
。 Last Access Time: Tuesday, May 10, 
se Last Update Time: Tuesday, May 10, 





Manifest: http://localhost/personality manifest 


Manifest: http-//sinuousgame com/cache manifest 


ternals 


1 5:35:23 PM 
2011 5:35:31 PM 
2011 5:35:23 PM 








Rermonwe this AnnNarhe 











择 该 网 站 ， 再 单 击 Remove 即 可 
缓存 了 一 个 站 点 ， 这 个 站 点 的 域 是 localhost ( 也 
就 是 当前 计算 机 的 测试 服务 器 )。 下 : 要 在 Chrome 
中 看 到 类 似 的 信息 ， 可 以 在 地 址 栏 中 输入 : 


chrome://appcache-internals 














。 图 中 显示 目前 只 














11.1.5 


浏览 器 对 离线 应 用 的 支持 情 〉 


相信 大 家 都 已 经 知道 了 ,除了 拖 HTML5 后 腿 的 斑 ， 所 有 主流 浏览 器 都 支持 离线 应 用 。 有 的 











浏览 絮 很 早 就 开始 支持 离线 应 用 了 ， 目 前 可 以 确定 有 Firefox、Chrome 和 Safari。 但 是 正直 到 IE10 
才 开 始 支 持 ， 这 意味 着 当下 流行 的 了 9 和 IE8 没 有 缓存 。 可 是 ， 不 同 浏览 器 支持 离线 应 用 的 方式 却 
不 大 一 样 。 最 重要 的 不 一 样 是 它们 分 配给 离线 应 用 的 存储 空 








了 哪些 网 站 可 以 做 成 离线 应 用 ， 


而 哪些 不 能 


s 间 。 这 个 差别 非常 重要 ， 因 为 它 决 定 


(参见 10.1.5 节 )。 


有 没有 让 不 支持 离线 应 用 的 浏览 器 ( 如 IE9 ) 支持 它 的 办 法 呢 ? 没有 什么 值得 尝试 的 好 办 法 。 


不 过 ， 这 并 不 妨碍 你 使 用 离线 应 用 功能 。 


~ 
毕竟 ， 





离线 应 用 只 是 一 个 补充 而 已 。 





不 支持 离线 功能 的 浏览 器 照样 可 以 访问 你 的 网 站 ,只 要 


的 人 ， 比 如 经 


缓存 有 没有 限制 ? 


缓存 空间 有 多 大 


不 同 浏览 器 对 离线 应 用 缓存 的 限制 有 很 大 不 同 。 


能 上 网 就 行 。 对 于 那些 需要 离线 浏览 





常 出 差 的 人 人， 他们 自己 会 找 一 个 支持 离线 功 外 g 的 浏览 器 ， 以 备 没 有 网 络 时 使 用 。 
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移动 浏览 器 是 最 明显 的 例子 。 因 为 移动 设备 本 身 空间 有 限 , 所 以 对 缓存 的 限制 也 比较 严 车。 
桌面 浏览 器 慷慨 许多 , 但 这 也 意味 着 不 可 预知 。 浏 览 器 可 能 给 每 个 网 站 分 配 一 个 固定 的 空间 限 
制 , 也 可 能 基于 当前 本 地 的 剩余 空间 和 一 些 其 他 因素 计算 一 个 合适 的 配额 。 通 常 ， 空 间 是 由 几 
个 HTML5 功 能 共享 的 ， 比 如 ， 如 果 使 用 了 File API 或 IndexedDB 功 能 (参见 第 10 章 )， 浏 览 器 可 
能 会 给 这 些 功能 以 及 应 用 缓存 分 配 一 组 空间 。 

显然 ， 浏 览 器 间 的 这 种 不 一 致 性 会 导致 问题 。 如 果 一 个 离线 应 用 试图 超额 使 用 缓存 ， 浏 览 
器 会 静 静 地 放弃 并 扔 掉 所 有 已 下 载 的 文件 。 不 仅 是 你 浪费 了 时 间 和 空间 , 你 的 用 户 也 没 捞 着 离 
线 的 好 。 他 们 不 得 不 在 线 使 用 你 的 应 用 。 

最 佳 经 验 法 则 是 给 苹果 设备 〔( 像 iPad 和 iPhone ) 分 配 50 MB 空间 , 给 Android 设 备 分 配 将 近 
85 MB 空间 。 所 有 的 移动 浏览 器 都 会 在 征 得 用 户 同意 后 才 允 许 网 站 使 用 缓存 。 桌 面 浏览 器 中 ， 
可 能 会 有 一 个 250 MB 或 350 MB 的 起 始 配额 。 如 果 缓 存 使 用 量 增 大 ， 一 些 桌 面 浏 览 器 会 略微 提 
高 一 点 配额 ， 但 不 保证 会 这 样 。 


11.2 ”实用 缓存 技术 


到 现在 为 止 , 我 们 已 经 介绍 了 把 一 组 页 面 和 资源 打包 成 离线 应 用 的 方法 。 期 间 , 我 们 学 习 了 
如 何 编 写 和 更 新 描述 文件 ， 以 及 如 何 让 浏览 器 不 要 忽视 我 们 的 劳动 成 果 。 利 用 这 些 知识 ,很 容易 
做 出 一 个 简单 的 离线 应 用 来 。 可 是 ， 要 实现 复杂 一 些 的 站 点 的 离线 功能 ， 仅 有 这 些 知识 还 不 够 。 
比如 ， 我 们 想 让 某 些 内 容 在 线 ， 而 在 离线 时 将 它们 替换 成 其 他 页 面 ， 这 就 涉及 如 何 〈 在 代码 中 ) 
判断 计算 机 是 否 处 于 联网 状态 。 在 接 下 来 的 几 节 中 ， 我 们 就 来 学 习 怎 样 编写 更 智能 的 描述 文件 ， 
怎样 通过 简单 的 JavaScript 检 测 设备 在 线 状态 。 


11.2.1 访问 未 缓存 的 文件 


经 过 前 面 的 学 习 , 我 们 知道 浏览 器 在 缓存 了 某 个 页 面 后 , 它 就 不 会 再 向 Web 服 务 顺 发 送 请 求 ， 
而 是 直接 使 用 缓存 的 页 面 。 但 你 知道 四 ,浏览 器 对 离线 页 面 的 所 有 资源 也 持 同 样 的 态度 ,无 论 它 
是 否 缓存 了 这 些 资源 。 

比如 ， 假 设 有 个 页 面 使 用 了 两 张 图 片 ， 标 记 如 下 : 


<img src="Images/logo.png" alt="Personality quiz"> 
<img src="Images/emotional bear.jpg" alt="Sad stuffed bear"> 


可 是 ， 描 述 文件 只 要 求 浏览 器 缓存 了 一 张 图 片 : 


CACHE MANIFEST 
PersonalityTest.html 
PersonalityTest Score.html 



































PersonalityTest.css 
PersonalityTest.js 


Images/emotional bear.jpg 
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有 读者 认为 ,浏览 器 会 从 缓存 中 取得 emotional_ bearpng， 然 后 (在 计算 机 联网 的 情况 下 ) 从 
Web 服 务 器 上 取得 logo.png。 毕 竟 ， 过 去 的 经 验 告诉 我 们 ， 在 从 缓存 的 页 面 中 访问 未 缓存 的 页 面 
时 ,浏览 器 就 会 这 样 做 。 可 是 对 于 离线 应 用 来 说 , 没有 这 回 事 儿 。 事实 上 ,无论 什么 浏览 器 ， 都 
会 从 缓存 中 取得 emotional_bear.png， 而 忽略 未 缓存 的 logo.png 并 显示 未 找到 文件 的 图 标 或 者 一 块 
空白 区 域 ,， 具体 显示 什么 ， 取 决 于 浏览 器 。 

要 想 解 决 这 个 问题 ， 必 须 在 描述 文件 中 添加 一 个 区 块 。 这 个 区 块 的 开头 冠 以 “NETWORK:” 
字样 ， 然 后 紧 跟 着 一 组 必须 在 线 访问 的 页 面 : 

CACHE MANIFEST 


PersonalityTest.html 
PersonalityTest Score.html 





PersonalityTest.css 
PersonalityTest.js 
Images/emotional bear.jpg 


NETWORK: 

Images/logo.png 

这 样 ， 在 联网 时 ， 浏 览 需 才 会 尝试 从 Web 服 务 需 下 载 logo.png 文 件 ， 而 在 离线 时 ， 则 会 包 略 它 。 

此 时 ,你 可 能 会 想 : 为 什么 要 把 不 想 缓存 的 文件 都 给 列 出 来 呢 ? 或 许 是 因为 缓存 空间 有 限 的 
原因 ， 比 如 ,为 了 确保 应 用 可 以 被 那些 只 有 少量 缓存 空间 的 浏览 器 缓存 ， 你 可 能 会 考虑 不 让 浏览 
器 缓存 那些 大 文件 〈 参 见 11.1.5 节 )。 

但 更 有 可 能 是 这 些 内 容 不 能 缓存 ， 比 如 跟踪 脚本 或 动态 生成 的 广告 。 此 时 ,最 简单 的 办 法 是 
在 “NETWORK:” 区 块 中 使 用 一 个 通配符 ， 即 星 号 (* )。 这 样 浏 览 器 就 知道 所 有 未 缓存 的 内 容 
都 必须 联网 访问 : 


NETWORK: 
* 


另外 , 还 可 以 使 用 星 号 匹配 任意 类 型 的 文件 ( 比如 ，*.jpg 匹 配 所 有 JPEG 图 片 ), 或 者 位 于 特定 
服务 器 上 的 所 有 文件 ( 比如 ,http://www.google-analytics.com 放 匹配 Google Analytics 域 中 的 所 有 文件 )。 





注意 ”既然 可 以 使 用 通配符 ， 那 在 缓存 文件 列表 中 使 用 它 可 以 吗 ? 这 样 不 必 逐 个 罗列 ， 就 可 以 
缓存 一 大 批文 件 了 。 很 让 憾 ,缓存 文件 列表 不 支持 通配符 ， 因 为 HTML5 规 范 制定 者 担心 
有 人 会 无 意 中 缓 存 庞大 的 站 点 。 


11.2.2 添加 后 备 内 容 


利用 描述 文件 可 以 告诉 浏览 器 哪些 文件 要 缓存 , 并 通过 NETWORK 区 块 告诉 哪些 文件 总 是 要 
从 Web 服 务 器 获取 且 永 不 缓存 。 除 此 之 外 ， 描 述 文 件 还 支持 一 个 “FALLBACK:” 区 块 ， 这 里 列 
出 的 文件 可 以 根据 计算 机 是 否 在 线 而 互 换 。 
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‘ 


‘FALLBACK:” 区 块 可 以 在 描述 文件 中 的 任何 地 方 出 现 , 但 要 每 行列 出 一 对 文件 来 。 第 一 个 





文件 名 是 在 线 时 使 用 的 文件 名 ， 第 二 个 文件 名 是 离线 后 备 文件 名 。 


FALLBACK : 
PersonalityScore.html PersonalityScore offline.html 


浏览 器 会 把 后 备 文件 ( 即 这 里 的 PersonalityScore_offline.html ) 下 载 并 缓存 起 来 。 不 过 ， 只 有 
在 不 能 上 网 的 时 候 浏览 器 才 会 使 用 这 个 后 备 文件 。 而 在 能 上 网 的 时 候 , 浏览 器 会 照常 向 Web 服 务 
器 请 求 男 一 个 文件 ( 即 这 里 的 PersonalityScore.html )。 








注意 不 必 为 了 让 Web 应 用 觉得 “离线 ”而 断 开 网 络 连 接 。 实 际 上 ， 关 键 在 于 能 否 访 问 到 服务 


器 ， 如 果 服 务 器 没有 响应 ，Web 应 用 就 会 认为 已 经 离线 了 。 


至 于 什么 时 候 该 使 用 后 备 内 容 , 那 可 能 性 就 多 了 去 了 。 比 如 , 可 以 在 离线 时 让 浏览 器 使 用 一 
个 简单 点 的 页 面 ， 其 中 的 脚本 与 在 线 页 面 中 的 不 同 ,或 者 使 用 了 更 少 的 资源 。 后 备 内 容 放 在 哪儿 


都 可 








以 ， 只 要 一 开始 加 上 “FALLBACK:” 就 可 以 : 


CACHE MANIFEST 
PersonalityTest .htm] 
PersonalityTest Score.html 


PersonalityTest.css 


FALLBACK: 

PersonalityScore.htm] PersonalityScore offline.html 
Images/emotional bear.jpg Images/emotional bear small.jpg 
PersonalityTest.js PersonalityTest offline.js 


NETWORK: 
内 


注意 ”在 描述 文件 中 ， 我 们 想 要 缓存 的 文件 位 于 CACHE 区 块 中 。 不 过 ， 除 非 你 想 要 在 另 一 个 区 


线 ， 


~、 


域 之 后 再 列 出 要 缓存 的 文件 ， 否 则 不 必 有 意 添加 这 个 区 块 。 





后 备 内 容 区 块 也 支持 通配符 匹配 。 这 样 就 可 以 创建 一 个 内 置 的 错误 页 面 ， 比 如 : 


FALLBACK : 
/ offline.html 


这 一 行 告诉 浏览 器 对 任何 不 在 缓存 里 的 文件 使 用 后 备 文件 。 
假设 有 人 要 请 求 与 离线 应 用 在 同一 个 网 站 中 的 页 面 , 但 该 页 面 没 有 在 缓存 中 。 如 果 计 算 机 在 
浏览 絮 就 会 联系 服务 器 取得 该 页 面 。 如 果 计 算 机 不 在 线 , 或 者 无 法 访问 网 站 , 或 者 根本 就 没 

















有 找到 请 求 的 页 面 ， 那 浏览 器 会 显示 缓存 的 offline.html 页 面 ( 图 11-4 )。 
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| Se 国 到 | 图 11-4， 浏览 器 访问 的 ImaginaryPage.html 不 存在 ， 但 浏览 器 却 没 
nh | 有 更 新 地 址 栏 因此 用 户 无 从 知晓 错误 页 面 到 底 叫 什么 名 字 


A 














The file you entered does not exist in the cache. 
Also. it either | 


a does not exist on the web server or 
b. you are offine 























在 前 面 的 例子 中 ,使 用 一 个 斜 杜 (/ ) 表示 任意 网 页 可 能 会 让 人 觉得 有 点 不 太 对 劲 儿 ， 因 为 
“NETWORK:” 区 块 的 通配符 是 星 号 。( 不 过 ， 在 有 的 浏览 右 中 ， 比 如 Firefox， 确实 可 以 在 后 备 
区 块 中 使 用 星 号 。) 就 当 这 是 一 个 无 害 的 HTML5 怪 壮 吧 。 

顺便 说 一 下 ， 还 可 以 通过 用 和 斜 杠 指 定子 目录 来 匹配 更 小 范围 内 的 文件 : 


FALLBACK : 
/paint_app/ offline.html 

















在 线 时 如 何 绕 开 缓存 

加 载 一 个 已 缓存 的 页 面 时 ,浏览 器 会 期 望 从 缓存 中 找到 一 切 , 而 不 管 当 时 是 在 线 还 是 离线 。 
浏览 器 倾向 于 使 用 缓存 并 期 望 用 它 找 到 一 切 ， 除 了 那些 明确 写 在 NETNORK: 区 块 的 文件 。 

这 种 方式 简单 直接 ， 但 也 不 够 灵活 。 如 果 你 更 希望 在 线 时 从 线 上 加 载 页 面 ， 但 离线 时 使 用 
缓存 文件 ， 那 么 主要 问题 就 来 了 。 比 如 ， 设 想 一 下 一 个 新 闻 网 站 的 前 端 页 面 ， 在 线 时 ， 每 次 访 
问 都 从 线 上 加 载 页 面 的 最 新 版 很 合理 ; 但 如 果 离 线 了 ， 最 新 的 缓存 页 面 可 能 还 用 得 上 。 但 标准 
的 缓存 机 制 不 允许 这 种 场景 ， 因 为 它 强制 你 在 永远 缓存 和 绝 不 缓存 之 间 做 一 个 抉择 。 

在 HTML5 标 准 化 进程 的 最 后 一 刻 ， 这 个 解决 方案 出 现 了 ， 添 加 一 个 叫 SETTINGS: 的 区 块 ， 
写法 如 下 : 

SETTINGS: 

prefer-online 


这 告诉 浏览 器 尽 可 能 从 线 上 获取 资源 ， 如 果 请 求 失败 则 使 用 缓存 文件 。 

虽然 这 个 权宜 之 计 看 上 去 还 不 错 , 但 它 有 一 些 问题 。 这 是 一 个 应 用 于 每 个 页 面 和 资源 (不 
仅仅 是 所 选 的 文件 ) 的 全 或 无 的 设置 。 这 使 得 在 离线 模式 下 使 用 缓存 没 那么 快 了 ， 因 为 浏览 器 
至 少 要 浪费 点 时 间 尝 试 连接 Web 服 务 器 。 但 最 大 的 问题 是 ， 在 写作 本 书 的 时 候 ， 只 有 Firefox 支 
持 prefer-online 设 置 ， 其 他 浏览 器 会 忽略 它 并 依然 用 普通 的 方式 使 用 缓存 。 


11.2.3 ”检测 连接 



































熟 不 知 , 使 用 JavaScript 检 测 浏览 器 当前 是 否 在 线 的 一 个 诀 宅 ,， 就 是 利用 后 备 区 块 。 如 果 你 是 
一 位 JavaScript 老 手 , 可 能 知道 navigator.onLine 属 性 , 这 个 属性 能 够 告诉 你 浏览 器 当前 是 和 否 在 线 ， 
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但 不 一 定 准确 。onLine 属 性 的 问题 是 ， 它 只 真实 地 反映 浏览 器 “ 脱 机 工作 ”的 设置 ， 并 不 反映 计 
算 机 是 否 真 的 连 到 了 因特网 。 就 算 onLine 属 性 能 真实 反映 连接 情况 , 它 也 不 会 告诉 你 浏览 器 到 底 
是 没有 连接 到 Web 服 务 器 ， 还 是 由 于 种 种 原因 没有 下 载 到 网 页 。 

所 以 , 我 们 只 能 利用 后 备 区 块 , 让 浏览 器 根据 应 用 是 否 在 线 分 别 加 载 相同 JavaScript 疯 数 的 不 
同 版 本 。 为 此 ， 要 在 后 备 区 块 中 添加 如 下 文件 对 : 


FALLBACK: 
online.js offline.js 


原始 的 网 页 引用 online.js: 


<!DOCTYPE html> 
<html lang="en" manifest="personality.manifest"> 
<head> 

<meta charset="utf-8"> 

<title>...</title> 

<script src="online.js"></script> 

















这 个 JavaScript 文 件 包 含 着 一 个 非常 简单 的 函数 : 


function isSiteOnline() { 
return true; 


} 
如 果 浏 览 器 没有 下 载 到 onlinejs, 就 会 使 用 offlinejs, 后 者 包含 着 一 个 同名 函数 , 但 返回 值 不 同 : 


function isSiteOnline() { 
return false; 


} 
在 原始 的 网 页 中 ， 为 了 知道 应 用 是 否 在 线 ， 检 测 这 个 isSite0nline() 函 数 即 可 : 


var displayStatus = document.getElementById("displayStatus"); 
if (isSiteOnline()) { 
/ (可 以 运行 依赖 上 网 的 任务 ， 比 如 通过 XMLHttpRequest 连 接 Web 服 务 器 ) 
displayStatus.innerHIML = "You are connected and the web server is online."; 











else { 
(应 用 在 离线 运行 ,需要 隐藏 或 修改 一 些 内 容 ， 或 者 禁用 某 些 功能 ) 


displayStatus.innerHTML = "You are running this application offline."; 


11.2.4 用 JavaScript 监 听 更 新 


使 用 相对 有 限 的 JavaScript 接 口 可 以 与 离线 应 用 功能 交互 。 这 个 JavaScript 接 口 就 由 
applicationCache 对 象 定义 。 

通过 applicationCache 对 象 的 status 属 性 ， 可 以 知道 浏览 览 需 当 前 在 干什么 ， 是 在 检测 更 新 的 
描述 文件 ， 还 是 在 下 载 新 文件 ， 抑 或 在 做 其 他 事 。 这 个 属性 变化 很 快 ， 也 很 有 用 ; 同样 有 用 的 是 
与 不 同属 性 值 对 应 的 事件 (参见 表 11-1 )， 这 些 事件 会 在 applicationCache 的 状态 变化 时 触发 。 
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表 11-1 缓存 事件 

























































































































































































































































































事 件 说 明 

onChecking 浏览 器 在 发 现 网 页 中 的 manifest 属 性 时 ,会 触发 这 个 事件 ， 并 向 Web 服 务 器 请 求 描述 文件 

onNoUpdate 如 果 浏 览 器 已 经 下 载 了 描述 文件 ， 而 描述 文件 并 未 改变 ， 浏 览 器 就 会 触发 这 个 事件 ， 然 后 
不 再 做 什么 了 

onDownloading 浏览 器 在 开始 下 载 描述 文件 (以 及 其 中 列 出 的 文件 ) 之 前 会 触发 这 个 事件 。 除 了 第 一 次 下 
载 描述 文件 时 ， 更 新 文件 时 都 会 触发 这 个 事件 

onProgress 下 载 文件 期 间 ， 浏 览 器 会 不 断 地 触发 这 个 事件 ， 以 报告 进度 

onCached 当 新 离线 应 用 的 所 有 文件 第 一 次 下 载 完成 后 ， 会 触发 这 个 事件 。 此 后 ， 不 会 再 发 生 事件 

onUpdateReady 这 个 事件 表示 已 经 取得 了 更 新 的 内 容 。 此 时 ， 新 内 容 已 经 可 以 使 用 了 ， 但 除非 重新 加 载 页 
面 ， 否 则 不 会 在 浏览 器 窗口 中 出 现 。 此 后 ， 不 会 再 发 生 事件 

onError 缓存 期 间 发 生 任何 问题 都 会 触发 这 个 事件 。 可 能 是 无 法 连接 Web 服 务 器 (这 种 情况 下 ,会 
把 页 面 切 换 到 离线 浏览 模式 ) ， 或 者 描述 文件 包含 错误 的 语法 ， 或 者 缓存 的 资源 不 存在 。 














此 后 ， 不 会 再 发 生 事件 
on0bsolete 在 检测 更 新 时 ,浏览 器 发 现 描述 文件 不 存在 了 ,就 会 触发 这 个 事件 。 然 后 ， 它 会 清除 缓存 。 
下 次 再 加 载 页 面 时 ， 浏 览 器 会 从 Web 服 务 器 取得 实时 、 最 新 的 在 线 版 页 面 


图 11-5 展 示 了 请 求 一 个 缓存 页 面 时 这 些 事件 如 何 展开 。 



















































































4 图 11-5: 如 果 你 内 心 是 个 微观 管理 控 ， 
二 可 以 控制 一 下 缓存 过 程 。 但 首先 你 需 
理解 缓存 事件 是 如 何 展开 的 ,就 像 这 幅 
图 所 描述 的 那样 。 这 个 流程 会 在 浏览 器 
在 找 扩 过 芝 伯 一 到 其 中 一 个 ( 粗 边框 的 ) 方 盒子 时 结束 


描述 文件 是 否 存在 ? 浏 | 。 onobsolete 
览 器 是 否 可 以 访问 它 ? 


是 


是 ”浏览 器 是 否 已 经 拥 
onNoUpdate 有 这 个 描述 文件 的 
最 新 版 本 ? 








下 载 描述 文件 时 
-二 发 生 错误 
4 
下 载 最 新 版 本 








下 载 完成 ， 这 是 否 
是 浏览 器 首次 下 载 
这 个 描述 文件 ? 
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这 里 面 最 有 用 的 事件 是 onupdateReady ， 表 示 浏 览 器 已 经 下 载 了 新 版 本 的 应 用 。 即 使 新 版 本 
已 经 可 以 使 用 了 , 但 浏览 器 窗口 中 显示 的 仍然 是 旧版 本 的 内 容 。 此 时 ， 可 以 利用 这 个 事件 告诉 访 
客 刷 新 页 面 ， 浏 览 新 版 本 的 内 容 ， 就 像 桌面 应 用 下 载 完 更 新 之 后 所 做 的 那样 : 


<script> 
window.onload = function() { 




















// 给 onUpdateReady 事 件 注册 事件 处 理 程序 
applicationCache.onupdateready = function() { 
var displayStatus = document.getElementById("displayStatus"); 
displayStatus.innerHTML = "There is a new version of this application. " + 
"To load it, refresh the page."; 


} 
} 
</script> 
要 不 ， 也 可 以 使 用 window.location.reload() 方 法 ， 在 用 户 确认 后 重新 加 载 页 面 
<script> 


window.onload = function() { 


applicationCache.onupdateready = function() { 
if (confirm( 
"A new version of this application is available. Reload now?")) { 
window.1location.reload(); 


) 


</script> 


图 11-6 展 示 了 这 段 代码 的 运行 结果 。 























i 加 本 是 喇 图 11-6: 如 果 访 客 单 击 OK， 应 用 就 会 重新 加 载 当 
本 CG © localhost, a i PersonalityTest i 家 aa 前 页 面 ， 显示 更 新 后 的 内 容 ( 否则 ， 下 次 再 打开 











这 个 页 面 或 者 刷新 页 面 之 后 ， 才 会 出 现 新 内 容 ) 
Five Factor Personality Test 








| 目 人 The page at localhost says: 
| 





| 9 A new version of this application is available, Reload now? 
| 
oe9 Ee 
| 回 目 目 目 目 trvwebubr 

(1 © [4 ldonttalk a lot 


| ee = 






































除了 status 属 性 和 上 述 事 件 之 外 ，applicationCache 对 象 还 有 两 个 方法 : update() 和 
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swapCache()。 其 中 ,update() 方 法 的 名 字 有 点 含糊 ,实际 上 调用 它 只 会 让 浏览 右 检 测 是 否 有 新 的 
描述 文件 。 如 果 有 ， 浏 览 絮 就 会 在 后 台 下 载 新 文件 ; 否则， 什么 也 不 做 。 

虽然 浏览 费 能 自动 检测 更 新 , 但 你 也 可 以 调用 update() 方 法 让 它 去 检测 ， 以 便 及 时 发 现 更 新 
的 描述 文件 。 这 个 方法 很 适合 那些 生命 期 长 的 Web 应 用 ， 比 如 一 打开 就 是 一 整 天 的 页 面 。 

第 二 个 方法 是 swapCache()， 用 于 告诉 浏览 器 开始 使 用 新 缓存 的 内 容 一 一 如 果 它 已 经 下 载 完 
了 更 新 。 然 而 ，swapCache() 方 法 不 会 影响 当前 显示 的 页 面 ; 要 让 当前 页 面 显示 新 内 容 ， 必 须 重 
新 加 载 它 。 那 swapCache() 还 有 什么 用 呢 ? 通过 切换 到 新 缓存 ， 此 后 加 载 的 所 有 内 容 〈 比如 动态 
加 载 的 图 片 )， 都 会 从 新 缓存 ( 而 不 是 旧 缓 存 ) 中 取得 。 如 果 处 理 得 好 ， 利 用 swapCache() 既 可 以 
让 页 面 访问 新 内 容 ， 又 不 必 强 制 完全 重 载 ( 同时 也 就 不 会 把 当前 应 用 重 置 为 初始 状态 )。 但 在 大 
多 数 应 用 中 ， 使 用 swapCache() 还 是 弊 大 于 利 ， 有 时 候 会 造成 混用 新 、 旧 缓存 的 问题 。 
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第 12 章 


理 





与 Web 服 务 需 通信 


书 一 开始 先 介绍 了 HTML5 中 与 标记 有 关内 容 ， 如 语义 元 素 、Web 表 单 和 视频 。 但 随 着 
学 习 的 深入 , 我 们 逐渐 接触 了 网 页 编程 技术 ,以 及 HITML5 中 与 JavaScript 密 切 相关 的 知 
识 。 这 一 章 , 我 们 进一步 探讨 网 页 编程 技术 ,不 仅 会 涉及 JavaScript 代 码 ， 而 且 会 有 服务 器 端 编程 
代码 ( 即 编写 在 Web 服 务 器 上 运行 的 程序 )， 但 与 服务 器 端 编程 语言 无 关 。 
讨论 服务 器 端 编程 有 一 个 问题 。 一 方面 ， 选 择 什么 语言 并 不 重要 ， 只 要 它 能 操作 纯 HTML5 
页 面 即 可 (所 有 服务 器 端 语言 都 可 以 )。 另 一 方面 , 深入 讲解 一 门 你 并 没 打算 使 用 的 或 者 你 的 Web 
主机 根本 不 支持 的 语言 ， 也 没有 什么 必要 。 况且 , 全 面 讲解 PHP、ASPNET、Ruby、 Java、 Python 
等 服务 器 编程 的 好 书 多 得 是 。 
本 章 讨论 的 问题 需要 的 服务 器 端 代码 并 不 多 , 也 不 难 懂 。 我 们 的 设想 是 让 这 些 代码 刚好 够 演 
示 每 个 HTML5S 功 能 ， 能 够 与 网 页 中 的 JavaScript 代 码 配合 。 对 于 你 自己 开发 的 项 目 ， 需 要 修改 并 
扩展 本 章 的 示例 ， 从 而 满足 你 自己 的 需要 ， 或 者 适应 你 自己 喜爱 的 语言 。 
说 了 半天 ， 到 底 是 什么 功能 需要 用 到 服务 器 端 编程 呢 ? HTML5 为 网 页 与 服务 器 通信 提供 了 
两 种 方式 。 第 一 种 方式 是 服务 器 发 送 事件 ( Server-Sent events )， 让 Web 服 务 器 能 够 定时 给 网 页 发 
送 消息 。 第 二 种 方式 是 Web Socket 框 架 , 让 浏览 器 与 Web 服 务 器 能 够 随心 所 和 欲 地 双向 通信 。 不 过 ， 
在 讨论 HTML5 的 这 两 项 新 功能 之 前 ， 我 们 要 先 讲 一 讲 当 前 广泛 使 用 的 服务 器 通信 机 制 ， 即 
XMLHttpRequest 对 象 。 

















注意 ”服务 器 发 送 的 事件 与 Web Socket 可 不 像 看 起 来 那么 简单 。 要 学 会 使 用 和 编写 简单 的 例子 
(本 章 的 例子 都 是 简单 的 例子 ) 不 难 。 但 要 利用 它们 构建 一 些 专业 网 站 中 的 功能 ， 还 要 安 
全 可 靠 ， 那 可 就 是 另外 一 码 事 儿 了 。 关 键 在 于 ， 要 在 网 站 中 实现 这 些 功能 ， 必 须 得 有 足 
够 丰富 的 服务 器 端 编程 经 验 。 


12.1 向 Web 服务 器 发 送 消息 


在 学 习 HTML5 提 供 的 与 服务 器 通信 的 新 功能 之 前 ， 必 须 先 了 解 此 前 与 服务 右 通 信 的 技术 。 
当然 ， 我 们 想 要 说 的 就 是 XMLHttpRequest 这 个 不 可 或 缺 的 JavaScript 对 象 ， 页 面 利 用 它 与 Web 服 务 
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器 通信 。 如 果 读 者 了 解 XMLHttpRequest 对 象 ( 而 且 也 在 使 用 它 )， 可 以 跳 过 这 部 分 内 容 。 不 过 , 假 
如 你 一 直 都 在 从 事 静 态 网 页 设计 ， 最 好 是 读 一 读本 节 。 























与 Web 服 务 器 通信 的 历史 

Web 诞生 初期 ， 与 服务 器 通信 是 一 件 很 简单 、 很 平常 的 事 儿 。 浏 览 器 请 求 网 页 ， 然 后 服务 
器 发 回响 应 。 仅 此 而 已 。 

后 来 ,软件 公司 的 一 些 人 想 出 了 新 点 子 。 他 们 设计 了 服务 器 端 工具 , 在 第 一 步 ( 请 求 网 页 ) 
和 第 二 步 (返回 页 面 ) 之 间 插 入 一 些 代码 。 这 样 做 是 为 了 动态 地 修改 页 面 ， 比 如 在 页 面 中 间 插 
入 一 段 标记 ， 甚 至 是 生成 一 个 新 页 面 ， 比 如 从 数据 库 中 读 取 数 据 ， 然 后 生成 特定 的 产品 详细 信 
息 HIML 页 。 

可 是 ，Web 开发 人 员 的 目标 更 高 ,希望 构建 交互 性 更 强 的 页 面 。 服务 器 端 编程 也 可 以 做 到 
这 一 点 ,但 实现 起 来 有 点 费劲 , 而且 浏览 器 必须 不 断 刷 新 页 面 。 比 如 ， 向 购物 车 中 添加 一 件 商 
品 ， 单 击 提交 按钮 可 以 提交 当前 页 面 (使 用 第 4 章 介 绍 的 表单 )， 请 求 一 个 新 页 面 。Web 服务 
器 可 以 发 回 同一 个 页 面 ， 也 可 以 发 回 一 个 不 同 的 页 面 ( 比 如， 显示 购物 车 中 商品 的 新 页 面 )。 
这 样 当然 也 很 好 ， 可 就 是 有 点 烦琐 。 

Web 开发 人 员 的 要 求 又 提高 了 ， 他 们 想 实 现 更 流畅 的 Web 应 用 (比如 电子 邮件 程序 )， 而 
不 是 反复 发 送 页 面 并 且 从 头 生 成 所 有 内 容 。 实 现 这 个 想法 的 一 组 技术 叫 Ajax， 其 中 涉及 一 个 
叫 XMLHttpRequest 的 JavaScript 对 象 。 使 用 这 个 对 象 ， 网 页 可 以 直接 与 Web 服务 器 通信 , 发 送 
数据 ， 取 得 响应 ， 不 必 整 体 提 交 或 刷新 。 这 样 就 让 JavaScript 真正 具备 了 处 理 网 页 的 能 力 ， 包 
括 更 新 页 面 内 容 。 而 有 全， 这 种 网 页 看 起 来 会 更 流畅 ， 反 应 也 更 快 。 


12.1.1 XMLHttpRequest 对 象 


实现 网 页 与 Web 服 务 器 直接 对 话 的 关键 是 XMLHttpRequest 对 象 。 这 个 对 象 最 早 是 由 微软 创造 
的 ， 当 时 是 想 通 过 它 改进 Outlook 电 子 邮件 程序 的 Web 版 。 但 后 来 , 所 有 现代 浏览 絮 都 实现 了 这 个 
对 象 。 今 天 ，XMLHttpRequest 对 象 已 然 成 为 大 多 数 现代 Web 应 用 的 基础 。 
XMLHttpRequest 对 象 的 基本 思想 是 让 JavaScript 代 码 自 己 发 送 请 求 ， 以 便 随 时 获取 数据 。 这 种 
请 求 是 异步 的 ， a a ie a 事实 上 ， 网 页 用 户 根本 不 会 注意 到 
后 台 发 送 了 请 求 〈 除非 页 面 上 会 显示 某 些 消息 或 进度 条 
XMLHttpRequest 对 象 非常 适合 ww 下 面 是 一 些 例子 。 
口 保存 在 服务 器 上 的 数据 。 包 括 文件 中 的 数据 或 数据 库 中 的 数据 ( 如 产品 或 客户 记录 )。 
口 只 有 服务 器 才能 完成 计算 的 数据 。 服 务 器 可 以 执行 复杂 代码 ， 完 成 复杂 计算 。 虽 然 在 客户 
端 用 JavaScript 也 能 执行 相同 计算 ,但 却 不 一 定 合 适 。 有 时 候 是 因为 JavaScript 的 数据 计算 功 
能 没有 那么 强大 , 或 者 客户 端 不 容易 得 到 要 拿 来 计算 的 数据 。 有 时 候 是 因为 数据 非常 机 密 ， 
必须 防止 别人 偷 看 或 者 算 改 。 还 有 时 候 是 因为 计算 量 极 大 ， 客 户 端 计算 机 不 可 能 像 高 配置 
的 Web 服 务 器 处 理 速度 那么 快 。 在 这 些 情 况 下 ， 让 Web 服 务 器 完成 计算 是 最 合适 的 。 
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口 其 他 人 Web 服 务 器 上 的 数据 。 你 的 网 页 不 能 直接 访问 别人 Web 服 务 器 上 的 数据 。 但 是 , 你 
可 以 (通过 XMLHttpRequest ) 调用 自己 Web 服 务 器 上 的 程序 ， 让 它 帮 你 从 其 他 服务 器 取得 
数据 ， 然 后 再 交 给 你 。 

要 想 真 正 理解 XMLHttpRequest， 最 好 的 办 法 就 是 实际 地 使 用 它 。 接 下 来 几 节 会 展示 两 个 简单 


的 例子 。 


12.1.2 ”向 Web 服 务 器 提问 


图 12-1 展 示 了 一 个 页 面 , 可 以 让 服务 器 做 简单 的 算术 题 。 这 个 表单 的 数据 是 通过 XMLHttpRequest 
对 象 发 送 的 。 


















































时 加 加 加] 图 12-1: 单 击 Ask the Server 按 钮 ， 网 页 就 会 创建 一 
er 只 -全 X | 和 到， 个 XMLHttpRequest 对 象 ， 把 两 个 数 发 送 到 服务 器 。 
服务 器 上 有 一 个 简单 的 脚本 ， 计 算出 结果 后 会 返 
回 结果 ( 见 图 12-2 ) 


















































Enter two numbers: 34 46 


To ask the server to add them, without refreshing the page, click this 
button: | Ask the Pever 











The request has been sent. 














鸭 100% vv 




















在 创建 这 个 页 面 之 前 ， 必 须 先 写 一 段 服务 器 端 脚 本 ， 用 来 处 理发 送 过 去 的 数据 ( 也 就 是 用 户 
输入 的 两 个 数值 )， 然 后 返回 结果 。 这 个 简单 的 任务 是 有 史 以 来 的 任何 一 门 服 务 器 端 编 程 语言 都 





可 以 胜任 的 (发 送 一 点 点 文本 内 容 ， 总 比 发 送 一 个 完整 的 HTML 文 档 要 简单 多 了 )。 我们 这 个 例 
子 用 的 是 PHP 肢 本， 主要 因为 PHP 相 对 简单 ， 几 乎 所 有 网 站 托管 公司 都 支持 它 。 
1. 创建 脚本 





创建 PHP 脚 本 的 第 一 件 事 儿 是 创建 一 个 文本 文件 。 在 这 个 文件 里 , 先 写 出 如 下 所 示 的 一 个 好 
玩 的 代码 块 ， 这 样 就 确定 了 脚本 的 起 始 和 结束 位 置 : 


<?php 
// 这 里 是 脚本 代码 
?> 
我 们 这 个 例子 的 脚本 代码 很 简单 ， 就 这 么 几 行 代码 : 
<?php 


$num1 = $ GET['number1']; 
$num2 = $ GET[ number2 ]; 
$sum = $num1 + $num2 
echo($sum) ; 

?> 
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就 算 你 不 是 一 个 PHP 专 家 ,一 看 也 该 知道 这 几 行 代码 能 做 什么 。 一 开始 当然 是 取得 网 页 发 送 
过 来 的 两 个 数值 : 

$num1 = $ GET[ 'number1 ]; 

$num2 = $ GET[ 'number2 ]; 


美元 ”只 是 一 个 $ 符 号 而 已 。 这 里 的 $ 可 不 表示 钱 ， 在 PHP 中 它 表 示 变 量 名 。 换 句 话 说 ,这 两 
行 代码 声明 了 两 个 变量 : $num1 和 $num2。 为 了 给 它们 赋值 ， 代 码 从 内 置 的 集合 $_GET 中 取得 数据 。 
$_GET 集 合 中 保存 着 请 求 这 个 脚本 的 URL 中 包含 的 所 有 信息 。 

还 是 看 个 例子 吧 。 如 果 你 把 这 个 PHP 脚 本 放 在 一 个 名 为 WebCalculatorphp 的 文件 中 ， 然 后 向 
它 发 送 了 如 下 请 求 : 

http://www.magicXMLHttpRequest.com/WebCalculator.php?number1=34&number2=46 

在 这 里 , 这 个 URL 的 末尾 附加 了 两 个 信息 ,就 在 URL 中 叫做 查询 字符 串 的 那 一 段 (在 代码 里 
加 点 空格 更 方便 解释 ， 如 下 所 示 。 现 实情 况 下 ， 浏 览 需 不 允许 URL 含 空格 )。 

http://www.magicXMLHttpRequest.com/WebCalculator.php ? number1=34 & number2=46 

首先 ， 查 询 字符 串 中 有 一 个 名 为 number1 的 值 ， 该 值 为 34; 接 下 来 是 名 为 number2 的 值 ， 该 值 
为 46。 这 两 个 值 前 面 的 问号 (? ) 表示 查询 字符 串 的 开头 ， 查 询 字符 串 中 的 和 号 ( & ) 用 于 分 隔 
每 个 名 值 对 ( 除非 查询 字符 串 中 只 有 一 个 值 ， 那 就 不 需要 了 )。PHP 引 擎 接收 到 请 求 后 ， 会 把 查 
询 字 符 串 中 的 值 保 存 到 $_GET 集 合 中 , 以 方便 脚本 代码 访问 。( 大 多 数 服务 器 端 脚本 语言 都 支持 类 
似 的 数据 模型 。 比 如 ， 微 软 的 ASPNET 会 把 相同 的 信息 保存 在 Request.QueryString 集 合 中 。) 






























































注意 HTML 老手 知道 向 Web 服 务 器 发 送 数据 有 两 种 方式 ， 一 种 是 像 这 样 通过 查询 字符 串 ， 另 一 
种 是 把 数据 放 在 请 求 的 消息 体 中 。 无 论 采取 哪 种 方式 ， 数 据 编码 不 变 ， 而且 在 服务 器 端 
访问 这 些 数 据 的 差别 也 不 大 。 具体 来 说 , 访问 消息 体 中 的 数据 ,在 服务 器 端 要 访问 $_POST 
集合 ， 而 不 是 $_GET 集 合 。 


PHP 脚 本 得 到 这 两 个 数值 后 ,会 把 它们 加 起 来 并 且 把 结果 保存 到 一 个 新 变量 中 。 这 里 的 新 变 


量 是 $sum: 











$sum = $num1 + $num2 

最 后 一 步 就 把 计算 结果 返回 发 送 请 求 的 网 页 。 可 以 把 结果 打包 放 在 一 段 HTML 标 记 中 ， 甚 至 
可 以 格式 化 为 XML。 不 过 我 们 这 个 例子 不 必 搞 这 么 复杂 ， 因 为 纯 文 本 就 足够 了 。 但 无 论 是 有 格 
式 的 ， 还 是 没有 格式 的 ， 返 回 数据 都 一 样 要 调用 PHP 的 echo 命 令 : 

echo($sum) ; 

就 这 么 多 ， 总 共 才 4 行 PHP 代 码 。 可 是 ， 就 赁 这 4 行 代码 已 经 足以 支撑 B/S 模 式 了 : 浏览 器 发 
送 请 求 ，Web 服 务 器 返回 结果 。 
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注意 能 否 完 np 写 这 个 例子 ， 让 它 在 浏览 器 运行 ， 而 不 向 Web 服 务 器 发 送 请 求 
呢 ? 当然 可 以 。 不过, 这 个 例子 的 重点 并 不 在 于 展示 简单 计算 , 关键 是 我 们 想 通 过 它 来 
说 明 服务 器 也 可 以 完成 计算 任务 。 而且, 无论 PHP 肢 本 写 得 多 复杂 ,浏览 器 与 服务 器 交 


换 数据 的 基本 模式 永远 不 会 变 。 


2. 请 求 服务 器 

第 二 步 就 是 构建 使 用 刚才 PHP 脚 本 的 页 面 , 这 里 要 用 到 XMLHttpRequest 对 象 。 其 实 非 常 简单 。 
首先 ， 我 们 要 创建 一 个 XMLHttpRequest 对 象 ， 以 便 在 所 有 函数 中 访问 它 : 

var req = new XMLHttpRequest(); 

在 用 户 单 击 Ask the Server 按 钮 和 时， 会 调用 askServer() 滑 数 : 


<div> 
<p>Enter two numbers: 
<input id="number1" type="number"> 
<input id="number2" type="number"> 
</p> 
<p>To ask the server to add them, without refreshing the page, click 
this button:<button onclick="askServer()">Ask the Server</button> 
</p> 
</div> 
名 id="result"></p> 


这 才 是 真正 要 做 的 事 ， 这 个 askserver() 函数 会 使 用 XMLHttpRequest 对 象 在 后 台 发 送 请 求 。 首 
先 ， 这 个 函数 会 收集 所 需 的 数据 一 一 两 个 数值 ， 它 们 在 表单 的 文本 输入 框 中 : 


function askServer() { 
var number1 = document.getElementById("number1").value; 
var number2 = document.getElementById("number2").value; 


然后 ， 使 用 这 两 个 数值 构建 一 个 查询 字符 串 ， 用 前 面 介 绍 的 那 种 格式 : 

var dataToSend = "?number1=" + number1 + "&number2=" + number2; 

接 下 来 该 准备 发 送 请 求 了 。 调 用 XMLHttpRequest 对 象 的 open() 方 法 是 第 一 步 。 这 个 方法 接收 
三 个 参数 : HTTP 操 作 类 型 ( GET 或 POST )、 作 为 请 求 目标 的 URL 和 表示 浏览 器 是 否 异步 工作 的 
布尔 值 (true 或 false ): 


req.open("GET", "WebCalculator.php" + dataToSend, true); 











注意 说 到 第 三 个 参数 ， 懂 行 的 读者 可 能 会 不 禁 担心 起 来 :“open() 方 法 的 最 后 一 个 参数 应 该 只 
传 入 true 啊 ,就 要 是 打开 异步 工作 模式 。” 没 错 ， 因 为 我 们 不 能 保证 接收 请 求 的 网 站 完全 
没有 问题 ， 如 果 打 开 同 步 工 作 模 式 ( 即 强 制 代码 停止 执行 ， 一 直 等 到 服务 器 响应 ) 可 能 
会 因为 等 不 到 响应 而 导致 网 页 崩溃 。 


在 真正 发 送 请 求 之 前 ， 还 必须 为 XMLHttpRequest 对 象 的 onReadyStateChange 事 件 指定 回调 函 
数 。 只 要 服务 器 返回 信息 ， 就 会 触发 这 个 事件 ， 其 中 包括 返回 响应 数据 。 下 面 这 段 代码 将 回调 函 





12.1 向 Web 服务 器 发 送 消 息 | 321 





数 设置 为 页 面 其 他 地 方 定义 的 一 个 函数 ， 名 为 handleServerResponse(): 

req.onreadystatechange = handleServerResponse; 

然后 ， 就 可 以 调用 XMLHttpRequest 对 象 的 send() 方 法 实际 地 发 送 请 求 了 。 因 为 是 异步 请 求 ， 
所 以 后 面 的 代码 会 紧 跟着 执行 ， 不 会 停顿 。 而 我 们 获得 响应 的 唯一 途径 就 是 通过 
onReadyStateChange 事 件 ， 而 该 事件 稍 后 才 会 触发 : 


req.send(); 














document .getElementById("result").innerHTML = "The request has been sent."; 


l 











当 onReadyStateChange 事 件 触发 并 且 接 收 到 响应 时 ， 需 要 首先 检测 XMLHttpRequest 的 两 个 居 
性 。 一 个 是 readystate， 它 的 值 是 从 0 到 4 的 一 个 数值 ， 分 别 表 示 请 求 已 经 初始 化 完毕 ( 1 )、 请 求 
已 经 发 送 (2 )、 已 经 接收 到 部 分 响应 (3 ) 和 请 求 响应 完成 (4 )。 显然 ， 除 非 zeadySstate 属 性 的 
值 为 4， 和 否则 往 下 处 理 没有 意义 。 另 一 个 属性 是 status， 保 存 着 HTTP 状态 码 。 对 这 个 属性 ， 我 们 
需要 等 待 它 的 值 变 成 200, 表示 一 切 顺利 。 假设 我 们 请 求 的 是 一 个 网 页 ， 那么 HTTP 状 态 码 可 能 是 
401 (表示 不 允许 访问 )、404( 没有 找到 )、302 (已 经 移动 ) 或 503 ( 服务 器 繁忙 )， 等 等 。( 要 了 
解 完整 的 HTTP 状 态 码 ， 请 参考 : www.addedbytes.com/for-beginners/http-status-codes。 ) 

我 们 的 例子 是 这 样 检 测 这 两 个 属性 的 : 


function handleServerResponse() { 
if ((req.readyState == 4) && (req.status == 200)) { 


如 果 两 个 条 件 都 满足 ， 就 可 以 从 XMLHttpRequest 的 response 属 性 中 取得 结果 了 。 当 然 ， 我 
们 知道 ， 这 个 结果 是 两 个 数值 相 加 的 和 。 然 后 ， 代 码 会 把 这 个 结果 显示 在 页 面 上 (参见 图 12-2 ): 


var result = req.responseText; 
document .getElementById("result").innerHIML = "The answer is: ”+ 
result + "."; 


ol 


































































































} 
} 
本 je 到 | 图 12-2: Web 服 务 器 返回 响应 触发 了 JavaScript 函 
后 || 国 http://ocalhost/AskTheServer.html pr ox| ne 数 ， 函数 把 结果 显示 在 页 F 

















@ Ask The Sever mm 








Enter two numbers: 34 46 


To ask the server to add them, without refreshing the page, click this 


button: | Ask the Server 


The answer is 80. 
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XMLHttpRequest 对 象 其 实 并 不 限制 你 请 求 的 数据 类 型 ， 其 名 字 中 带 XML 是 因 一 开始 设计 它 的 
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时 候 是 要 处 理 XML 数 据 ， 因 为 XML 是 组 织 结构 化 数据 的 一 种 方便 、 有 语义 的 格式 。 可 是 ， 
XMLHttpRequest 也 可 以 请 求 简单 的 文本 ( 就 像 我 们 这 个 例子 中 这 样 )、JSON 数 据 ( 参见 10.2.4 节 )、 
HTML (下 一 个 例子 会 涉及 ) 和 XML 等 。 事 实 上 ， 目 前 用 XMLHttpRequest 请 求 非 XML 数据 的 情况 
反而 更 多 见 ， 因 此 提醒 大 家 不 要 被 它 的 名 字 所 迷惑 。 


提示 在 调用 服务 器 端 代码 之 前 ， 必 须 先 把 包含 PHP 脚 本 的 网 页 放 到 一 个 测试 服务 器 上 。 为 了 
简单 起 见 ， 欢 迎 读者 到 本 书 网 站 上 试验 : http://prosetech.com/html5。 


12.1.3 ”取得 新 内 容 


XMLHttpRequest 对 象 的 男 一 种 用 法 是 取得 新 的 HTML 内 容 ， 然 后 插入 到 当前 页 面 中 。 比 如 ， 
新 闻 报道 中 可 能 包含 多 张 图 片 , 但 每 次 只 显示 其 中 一 张 。 按 一 下 按钮 ，JavaScript 就 会 取得 下 一 张 
图 片 ， 然 后 插入 到 页 面 中 。 再 比如 ， 页 面 中 有 一 个 “五 强 ” 或 “十 强 ” 的 约 灯 片 ， 每 次 单 击 链接 
都 会 显示 一 张 。 图 12-3 展 示 了 一 个 与 文章 相配 的 幻灯 片 ， 每 张 图 片 都 配 有 相应 的 文字 说 明 。 
图 12-3 所 示 的 用 例 在 很 多 情况 下 都 适用 。 在 恰当 设计 的 情况 下 ， 这 种 方法 非常 适合 展示 大 量 
内 容 ， 既 能 保证 可 读 性 ， 又 不 至 于 让 人 觉得 内 容 过 多 。( 如 果 内 容 本 身 不 多 ， 这 样 做 只 会 徒 增 复 
杂 性 ， 迫 使 用 户 发 送 多 个 请 求 才 能 得 到 完整 内 容 。) 

取得 部 分 内 容 最 好 是 使 用 XMLHttpRequest 对 象 。 因 为 使 用 XMLHttpRequest 取 得 部 分 内 容 后 再 
更 新 页 面 ， 不 会 引起 整个 页 面 的 刷新 。 就 为 了 更 新 局 部 内 容 而 刷新 整个 页 面 可 不 好 , 那样 就 会 把 
其 他 没有 更 新 的 内 容 再 重新 下 载 一 遍 ， 导 致 页 面 内 烁 ， 而 且 有 时 候 还 会 把 页 面 重 新 定位 到 顶部 。 
这 些 说 起 来 似乎 是 小 事 ， 没 那么 严重 ,但 正 是 这 些 细节 决定 了 人 们 对 你 网 站 的 印象 是 流畅 快 损 
还 是 老 气 横 秋 、 不 可 救 药 。 

要 做 出 图 12-3 所 示 的 例子 ， 首 先 要 给 动态 内 容留 出 空间 来 。 下 面 这 个 <div> 元 素 背 景 是 金黄 
色 的 ， 它 下 面 是 两 个 链接 : 

<div id="slide">Click Next to start the show.</div> 


<a onclick="return previousSlide()" href="#">&]lt; Previous</a>&nbsp; 
<a onclick="return nextSlide()" href="#">Next &gt;</a> 


这 两 个 链接 分 别 调用 previousSlide() 和 nextSlide() 了 函数， 表示 向 前 或 向 后 导航 。 这 两 个 函 
数 的 用 途 是 增加 计数 器 ,计数器 的 值 从 0 开始 ， 最 大 为 $5， 然后 再 递减 回 1。 其 中 ，nextslide() 汤 
数 的 代码 如 下 : 


var slideNumber = 0; 













































































人 











function nextSlide() { 
// 向 前 移动 幻灯 片 索 引 
if (slideNumber == 5) { 
slideNumber = 1; 
} else { 
slideNumber += 1; 


} 
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// 调 用 另 一 个 函数 显示 当前 幻灯 片 
goToNewSlide(); 


// 取 消 链接 的 默认 动作 
//( 即 不 会 打开 新 页 面 ) 
return false; 











[DD China Sites 








Click Next to start the show. 














[EH 


| D china Sites 











(€)3 | 


http://localhost/China/ChinaSites.html 





The Exotic Side of China 


China's chief tourist attractions are well known. Less familiar are the sites 
comifiting. If 
llow us off the 


eC MIEN 


Take a beautiful trip back in time. just don't complain about the 
sanitation facilities. 
































图 12-3 :这 个 页 面 把 内 容 分 成 多 个 幻灯 片 。 
单 击 Previous 或 Next 链 接 可 以 加 载 新 幻灯 
片 ， 包 含 新 图 片 和 相应 的 说 明文 本 。 实 现 
这 个 功能 的 时 候 要 用 到 XMLHttpRequest 对 
象 ， 它 会 在 必要 时 请 求 新 内 容 
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而 previousSlide() 函 数 的 代码 与 之 非常 类 似 : 


function previousSlide() { 
if (slideNumber == 1) { 
slideNumber = 5; 
} else { 
slideNumber -= 1; 


} 


goToNewSlide(); 
return false; 


} 

这 两 个 函数 都 依赖 于 另 一 个 函数 goToNewSlide() 去 完成 真正 的 工作 。 所 谓 真 正 的 工作 就 是 它 
会 使 用 XMLHttpRequest 与 Web 服 务 器 通信 ， 然 后 取得 新 数据 。 

一 个 现实 的 问题 ，ChinaSites.html 页 面 从 哪里 取得 数据 ? 复杂 一 点 的 话 ， 它 可 以 从 某 个 Web 
服务 或 PHP 脚 本 取得 数据 。 新 内 容 可 以 动态 生成 , 或 者 从 数据 库 中 读 出 来 。 但 我 们 这 个 例子 会 采 
取 技 术 含 量 低 一 点 的 方法 ,但 在 任何 Web 服 务 器 上 都 行 得 通 一 一 读 取 特定 的 文件 。 比 如 ， 与 第 一 
张 幻 灯 片 对 应 的 文件 是 ChinaSitesl slide.html ， 与 第 二 个 张 幻 灯 片 对 应 的 文件 是 
ChinaSites2_slide.html, 以 此 类 推 ,每 个 文件 中 里 包含 一 小 段 HTML 标 记 ( 而 不 是 一 个 完整 的 HTML 
页 面 )。 例 如 ，ChinaSites5_slide.html 中 包含 如 下 HTML 标 记 : 


<figure> 
<h2>Wishing Tree</h2> 
<figcaption>Make a wish and toss a red ribbon up into the branches 
of this tree. If it sticks, good fortune may await.</figcaption> 
<img src="wishing tree.jpg"> 

</figure> 


既然 知道 了 数据 保存 在 哪里 ， 通 过 XMLHttpRequest 取 得 正确 的 文件 就 是 小 菜 一 碟 了 。 为 生成 
正确 的 文件 名 ， 只 要 在 一 行 简单 的 代码 中 舱 入 计数 带 当 前 的 值 即 可 。 下 面 就 是 goToNewSlide() 画 
数 的 代码 : 


var req = new XMLHttpRequest(); 












































function goToNewSlide() { 
if (req != null) { 
// 准 备 请 求 包含 幻灯 片 数据 的 文件 
req.open("GET", "ChinaSites" + slideNumber + "” slide" + ".html", true); 
// 设 置 用 于 处 理 幻灯 片 数据 的 隙 数 
req.onreadystatechange = newSlideReceived; 


// 发 送 请 求 
req.send(); 


’ 
} 


最 后 一 步 就 是 把 取得 的 数据 复制 到 表示 当前 幻灯 片 的 <div> 元 素 中 : 


function newSlideReceived() { 
if ((req.readyState == 4) && (req.status == 200)) { 
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document .getElementById("slide").innerHTML = req.responseText; 


提示 “为 了 让 幻灯 片 更 生动 ， 可 以 创建 过 渡 效 果 。 比 如 ， 新 图 片 可 以 淡 入 到 视图 ， 与 此 同时 淡 
出 旧 图 片 。 为 此 ， 只 要 修改 opacity 属 性 ， 用 JavaScript 计 时 器 (参见 9.4.1 节 ) 或 CSS3 过 渡 
(参见 6.3.3 节 )。( 这 里 是 经 典 的 实现 方案 : http://clagnut.com/sandbox/imagefades.php， 这 
里 的 CSS 方 案 使 用 了 新 的 CSS3 过 渡 功 能 ， 但 该 功能 尚未 得 到 所 有 浏览 器 支持 : 
http://css3.bradshawenterprises. com/cfimg2/。) 实际 上 ， 这 也 是 使 用 XMLHttpRequest 的 动态 
页 面 的 一 个 好 处 可 以 控制 新 内 容 呈 现 的 方式 。 





这 个 例子 到 现在 还 没有 完 。13.3.3 节 在 讨论 HTML5 的 历史 管理 功能 时 ， 还 会 讲 到 如 何 让 这 个 
例子 中 当前 显示 的 幻灯 片 与 浏览 器 地 址 栏 中 的 URL 匹 配 。 不过, 就 本 章 内 容 来 说 , 我 们 接 下 来 应 
该 介绍 其 他 与 Web 服 务 器 通信 的 方式 了 。 


注意 ”如果 用 目前 流行 的 jQuery JavaScript 工 具 包 ， 可 能 不 需要 直接 用 XMLHttpRequest 对 象 ， 而 
是 用 jQuery 方法 ， 比 如 jQuery.ajax()， 它 会 在 后 台 使 用 XMLHttpRequest， 技 术 是 一 样 的 ， 
但 jQuery 把 过 程 简 单 化 了 。 


12.2 服务 器 发 送 事 件 


使 用 XMLHttpRequest 可 以 向 Web 服 务 器 发 送 请 求 ， 并 且 能 很 快 得 到 响应 。 这 种 通信 方式 是 一 
对 一 的 ， 即 Web 服 务 器 响应 之 后 ， 通 信和 就 结束 了 。 换 名 话说 ，Web 服 务 器 不 可 能 等 几 分 钟 ， 等 有 
了 更 新 之 后 再 发 送 一 次 响应 。 

不 过 , 有 一 些 网 页 可 以 与 Web 服 务 右 保持 长 期 的 联系 。 比 如 ,显示 股票 报价 的 Google Finance 
( http:/www.google.com/finance )。 在 桌面 上 打开 这 个 页 面 不 用 管 它 ， 股 票 价格 也 会 定期 更 新 。 再 
比如 ， 英 国 广播 公司 (BBS ) 的 滚动 新 闻 页 面 http:/www.bbc.co.uknews/。 呆 在 这 个 页 面 上 一 天 ， 
你 也 会 发 现 新 闻 标 题 自 动 更 新 。 当 然 ， 在 一 些 Web 邮 件 程序 里 ， 比 如 微软 的 Outlook.com 
(www.outlook.com ) 也 能 发 现 收 件 箱 会 不 断 增加 新 邮件 。 

以 上 例子 中 的 网 页 使 用 了 一 种 技术 ,叫做 轮 询 。 顾 名 思 义 ， 轮 询 就 是 每 隔 一 定时 间 ( 比如 几 
分 钟 ) 就 向 Web 服 务 器 请 求 新 数据 。 为 了 实现 这 个 操作 ， 可 以 使 用 JavaScript 的 setInterval() 或 
setTimeout () 函 数 (参见 9.4.1 节 )， 每 过 设 定 的 时 间 就 触发 一 次 代码 。 

轮 询 是 一 个 合理 的 方案 ,但 有 时 候 效 率 不 高 。 因 为 轮 询 意味 着 要 向 服务 器 发 送 请 求 ， 要 建立 
新 连接 ， 而 这 样 做 只 是 想 知道 是 否 有 新 数据 。 如 果 成 千 上 万 的 用 户 都 这 样 轮 询 ,无 疑 会 给 服务 器 
造成 无 谓 的 压力 。 



























































326 | 第 12 章 与 Web 服务 器 通信 


还 有 一 种 方案 ， 叫 做 服务 器 发 送 事件 ， 可 以 让 网 页 与 Web 服 务 器 保持 连接 。 服 务 器 任何 时 候 
都 可 以 发 送 消息 ， 而 不 必 频 繁 断 开 连接 ， 然 后 再 重新 连接 并 重新 运行 服务 器 端 脚 本 。( 除非 你 希 
望 如 此 ， 因 为 服务 需 发 送 事件 也 支持 轮 询 。) 最 关键 的 是 ， 使 用 服务 器 发 送 事件 很 简单 ， 大 多 数 
Web 主 机 都 支持 ， 而 且 极其 稳定 可 靠 。 但 毕竟 它 是 一 个 相对 新 的 技术 ， 在 本 书写 作 时 Internet 
Explorer 不 文 持 它 ， 如 表 12-1 所 示 。 


表 12-1 浏览 器 对 服务 器 发 送 事 件 的 支持 情况 
IE Firefox Chrome Safari Opera Safari iOS Android 版 Chrome 
最 低 版 本 一 6 6 要 11 4 29 




















注意 如果 你 想 找 一 些 能 够 模拟 服务 器 发 送 事件 的 腻子 脚本 ， 可 以 参考 这 里 : http://tinyurl.com/ 
polyfills。 


接 下 来 几 节 ， 我 们 将 通过 一 个 简单 的 例子 演示 服务 器 发 送 事件 。 
12.2.1 消息 格式 


与 使 用 XMLHttpRequest 不 同 ， 服 务 融 发 送 事件 这 个 标准 不 允许 随意 发 送 数据 ， 而 是 必须 遵循 
一 个 简单 但 明确 的 格式 。 每 条 消息 必须 以 data: 开 头 , 然后 是 实际 的 消息 内 容 , 再 加 上 换行 符 ( PHP 
等 很 多 编程 语言 中 用 \n\n 表 示 换 行 符 )。 

下 面 就 是 一 条 标准 的 通过 因特网 传输 的 消息 : 

data: The web server has sent you this message.\n\n 

也 可 以 把 一 条 消息 分 成 多 行 ， 每 行 都 要 跟 一 个 行 结 束 符 , 用 \n 表 示 。 这 样 就 可 以 发 送 较 复杂 
的 内 容 了 : 

data: The web server has sent you this message.\n 

data: Hope you enjoy it.\n\n 

不 过 ,一 条 消息 分 成 多 行 ， 每 行 开头 仍 要 有 data:， 而 整个 消息 结束 同样 要 跟 \n\n。 

利用 这 个 格式 ， 甚 至 可 以 发 送 JSON 数 据 (参见 10.2.4 节 )， 这 样 网 页 只 需 一 步 即 可 把 文本 转 
换 为 JavaScript 对 象 ; 


data: {\n 

data: "messageType": "statusUpdate",\n 
data: "messageData": "Work in Progress"\n 
data: }\n\n 


除了 消息 本 身 之 外 ，Web 服 务 器 还 可 以 发 送 唯一 的 ID 值 (使 用 id: 前 级 ) 和 一 个 连接 超时 选 
项 (使 用 retry: 前 级 ): 
id: 495\n 


retry: 15000\n 
data: The web server has sent you this message.\n\n 
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你 的 网 页 一 般 只 关注 消息 本 身 , 不 关心 ID 和 连接 超时 信息 -ID 和 超时 信息 是 浏览 器 要 使 用 的 。 
比如 ， 浏 览 器 在 读 到 以 上 信息 后 就 会 知道 ， 如 果 连 接 已 经 断 开 ， 那 么 应 该 在 15 000 毫 秒 (15 秒 ) 
后 再 重新 建立 连接 。 重 新 建立 连接 时 ， 应 该 把 了 编号 495 一 起 发 给 服务 器 ， 以 便 确 认 。 





























注意 浏览 器 与 服务 器 失去 联系 的 原因 有 很 多 ， 比 如 网 络 中 断 或 者 代理 服务 器 等 待 数据 超时 。 
浏览 器 会 在 可 能 的 情况 下 自动 重新 打开 连接 ， 默 认 等 待 时 间 为 3 秒 钟 。 


12.2.2 ”通过 服务 器 脚本 发 送 消息 


知道 了 消息 的 格式 ,编写 服务 右 端 脚本 发 送 消息 就 不 在 话 下 了 。 同样 ,我 们 还 是 以 几乎 所 有 
Web 主 机 都 支持 的 PHP 来 写 一 个 直观 的 例子 。 图 12-4 展 示 了 一 个 从 服务 器 取得 消息 的 页 面 ， 而 消 
息 的 内 容 只 是 服务 器 上 的 当前 时 间 。 






































蕊 二 性 富 图 12-4: 页 面 在 监听 的 情况 下 , 会 连续 不 断 地 收 到 






































癌 Server-Sent Events E | ea ee oy 
€ CC | © localhost/ServerEvents.htm 家 aa 服务 器 发 送 的 消息 ， 大 约 每 两 秒 钟 条 。 每 条 消 
息 都 会 在 上 面 的 消息 框 中 依次 列 出 ， 消 息 框 下 方 

Ne Noner 和 [eing tor mesvages 的 时 间 表 示 接 收 最 后 一 条 消息 的 时 间 








Started listening for messages. 

New web server time received: 10:21:08 
New web server time received: 10:21:10 
New web server time received: 10:21:12 
New web server time received: 10:21:14 
New web server time received: 10:21:16 
No longer listening for messages. 
Started listening for messages. 

New web server time received: 11:45:08 
New web server time received: 11:45:10 
New web server time received: 11:45:12 
New web server time received: 11:45:14 下 
New web server time received: 11:45:16 

New weh server time rereived: 11:45:18 





11:45:18 3 | 




















注意 Web 服 务 器 的 时 间 是 持续 变化 的 ， 因 此 保存 该 时 间 信 息 的 变量 也 要 持续 更 新 。 为 了 演示 
这 一 点 ， 我 们 就 可 以 创建 一 个 简单 的 服务 器 端 事件 。 不 过 ， 在 真正 的 开发 中 ， 服 务 器 消 
息 应 该 发 送 更 有 价值 的 消息 ， 比 如 为 生成 滚动 新 闻 而 发 送 最 新 的 新 闻 标 题 。 











这 个 例子 的 服务 器 端 代 码 只 是 简单 地 过 两 秒 钟 就 返回 一 次 时 间 ， 以 下 是 完整 的 代码 : 


<?php 
header("Content-Type: text/event-stream"); 
header('Cache-Control: no-cache'); 
ob_end clean(); 
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// 开 始 不 间断 的 循环 
do { 
// 取 得 当前 时 间 
$currentTime = date("h:i:s", time()); 


// 把 时 间 放 到 消息 中 发 送 
echo "data: " . $currentTime . PHP_EOL; 
echo PHP_EOL; 


flush(); 


// 等 两 秒 钟 再 创建 新 消息 
sleep(2); 
} while(true); 
?> 


脚本 开始 先 设 置 了 两 个 重要 的 头 部 信息 。 首 先 ， 设 置 了 MIME 类 型 为 text/event-stream， 这 
是 服务 器 端 事件 标准 规定 的 : 

header( "Content-Type: text/event-stream'); 

然后 ， 告 诉 Web 服 务 器 〈 及 代理 服务 器 ) 关闭 Web 缓 存 。 和 否则， 含有 时 间 的 消息 可 能 不 会 按 
先后 次 序 到 达 

header('Cache-Control: no-cache'); 

还 需要 一 步 来 关闭 PHP 内 置 的 缓冲 机 制 ， 这 样 PHP 脚 本 返回 的 数据 会 立即 传 给 浏览 器 
ob _ end clean(); 


剩 下 的 代码 构成 了 一 个 无 限 循 环 (至 少 在 客户 端 存在 的 情况 下 会 一 直 循环 下 去 )。 每 次 循环 
都 会 调用 内 置 的 time() 函 数 ， 取 得 当前 时 间 (格式 为 hnh:mm:ss )， 并 将 其 保存 在 一 个 变量 中 : 

$currentTime = date('h:i:s', time()); 

接 下 来 , 循环 利用 这 个 变量 按照 正确 的 格式 来 构建 一 条 消息 , 以 便 使 用 PHP 的 echo 命 令 发 送 。 
这 个 例子 中 的 消息 只 有 一 行 ， 以 data: 开 头 ， 然 后 是 时 间 。 消 息 字 符 串 的 最 后 是 一 个 常量 PHP_EOL 
( 在 PHP 中 表示 end ofline， 即 行 结束 符 )， 也 就 是 我 们 前 面 讨论 的 \n 字 符 : 


echo 'data: ' . $currentTime . PHP_EOL; 
echo PHP_EOL; 


























注意 或 许 有 读者 觉得 用 点 操作 符 (.) 来 连接 字符 串 很 有 意思 。 这 里 跟 JavaScript 中 使 用 加 号 
(+ ) 操作 符 连接 字符 串 是 一 样 的 ; 当然 ， 使 用 加 号 连接 字符 串 时 ， 必 须 至 少 有 一 个 操作 
数 是 字符 串 ， 如 果 每 个 操作 数 都 是 数值 ， 那 就 会 执行 加 法 计算 了 。 














调用 flush() 函 数 的 用 意 是 立即 发 送 数据 , 而 不 是 先 缓冲 起 来 ,等 到 PHP 代 码 执行 完毕 再 发 送 。 
最 后 ，sleep() 函 数 会 让 程序 暂停 两 秒 钟 ， 然 后 再 继续 下 一 次 循环 。 
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与 客户 机 之 间 ， 用 于 分 散 流量 的 服务 器 ) 给 切断 了 。 为 了 避免 这 种 情况 发 生 ， 可 以 每 隔 


提示 如果 接 收 两 条 消息 会 等 待 较 长 的 时 候 ， 可 能 是 连接 被 菜 个 代理 服务 器 ( 位 于 Web 服 务 器 
15 秒 左右 ， 发 送 一 条 只 包含 冒号 (: ) 而 没有 文本 内 容 的 注释 消息 。 


12.2.3 在 网 页 中 处 理 消息 


监听 服务 器 发 送 消息 的 网 页 更 简单 。 以 下 就 是 网 页 <body> 部 分 的 所 有 标记 ， 分 为 三 个 <div> 
区 块 : 一 个 用 于 滚动 显示 消息 、 一 个 用 于 显示 时 间 ， 兄 一 个 用 于 显示 按钮 : 


<div id="messageLog"></div> 
<div id="timeDisplay"></div> 
<div id="controls"> 
<button onclick="startListening()">Start Listening</button><br> 
<button onclick="stopListening()">Stop Listening</button> 
</div> 


页 面 加 载 后 ，JavaScript 代 码 会 找到 ID 为 messageLog 和 timeDisplay 的 <div> 元 素 ， 将 它们 保存 
在 全 局 变量 中 ， 以 便 后 面 的 函数 使 用 : 


var messageLog; 
var timeDisplay; 











window.onload = function() { 
messageLog = document.getElementById("messageLog"); 
timeDisplay = document.getElementById("timeDisplay"); 


上 
监听 事件 的 过 程 在 用 户 单 击 Start Listening 按 钮 的 时 候 开 始 。 此 时 ，JavaScript 会 创建 一 个 新 
EventSource 对 象 ， 传 人 服务 器 端 发 送 消息 的 脚本 URL。( 在 这 个 例子 中 ， 脚本 名 为 
TimeEvents.php。 ) 然后 , 将 处 理 孙 数 指定 给 onMessage 事 件 , 这 个 事件 会 在 页 面 接收 到 消息 时 触发 : 


Vvar Source; 


function startListening() { 
source = new EventSource("TimeEvents.php"); 
source.onmessage = receiveMessage; 
messageLog.innerHTML += "<br>" + "Started listening for messages."; 


提示 “为 了 检测 浏览 器 是 否 支持 服务 器 端 事件 ， 可 以 测试 是 否 存在 window.EventSource 属 性 。 如 
果 不 存在 ， 就 要 使 用 后 备 方案 。 比 如 ， 可 以 使 用 XMLHttpRequest 对 象 定 时 向 Web 服 务 器 请 
求 数 据 。 


在 触发 了 receiveMessage 函 数 时 ， 可 以 从 事件 对 象 的 data 属 性 中 取得 消息 。 对 我 们 这 个 例子 
而 言 ， 会 把 新 消息 显示 在 原来 的 消息 框 中 ， 然 后 更 新 时 间 显 示 : 
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function receiveMessage(e) { 
messageLog.innerHTML += "<br>" + "New web server time received: " + e.data; 
timeDisplay.innerHTML = e.data; 


注意 ,网 页 接收 到 的 消息 不 会 包含 前 级 data: 和 结束 的 \n\n 符 号 , 只 有 其 中 的 消息 内 容 (也 就 
是 时 间 值 本 身 )。 

最 后 ， 调 用 EventSource 对 象 的 close() 方 法 ， 可 以 让 页 面 停止 监听 服务 器 事件 ， 相 应 的 代码 
如 下 : 


function stopListening() { 
source.close(); 
messageLog.innerHTML += "<br>" + "No longer listening for messages."; 








12.2.4” 轮 询 服 务 器 端 事 件 


前 面 的 例子 以 最 简单 的 方式 使 用 了 服务 器 端 事 件 : 页 面 发 送 请 求 ， 连 接 保持 打开 ,服务 器 定 
时 发 送信 息 。 在 当前 连接 有 问题 或 者 出 于 其 他 目的 (比如 手机 电池 快 没 电 了 ) 临 时 终止 了 通信 时 ， 
浏览 需 可 能 需要 重新 连接 ( 重新 连接 也 是 自动 的 )。 

如 果 服 务 器 脚本 结束 了 , 而 且 服 务 器 关闭 了 连接 怎么 办 ?这 个 就 有 意思 了 ,因为 即便 服务 器 
有 意 关闭 连接 , 网 页 仍然 会 自动 重新 打开 连接 ( 默认 等 待 3 秒 钟 ), 再 次 请 求 脚本 , 然后 从 头 开始 。 

这 种 机 制 是 可 以 利用 的 。 比 如 , 假设 你 写 了 一 个 比较 短 的 服务 器 脚本 ,只 发 送 一 条 消息 。 而 
此 时 网 页 就 像 在 使 用 轮 询 (参见 前 几 页 )， 周 期 性 地 重新 建立 连接 。 唯 一 的 差别 就 是 Web 服 务 器 
会 告诉 浏览 器 再 等 待 多 长 时 间 才 能 检查 新 数据 。 在 真正 使 用 轮 询 的 网 页 中 ， 等 待 时 间 是 在 
JavaScript 代 码 中 确定 的 。 

下 面 这 段 脚 本 混合 了 两 种 手段 ， 它 保持 连接 (并 周期 性 地 发 送 消息 ) 1 分 钟 ， 并 建议 浏览 
等 待 2 分 钟 再 重新 连接 ， 然 后 关闭 连接 : 


<?php 
header("Content-Type: text/event-stream"); 
header('Cache-Control: no-cache'); 










































































ob_end clean(); 


// 告 诉 浏览 器 在 连接 关闭 后 
// 等 待 2 分 钟 再 重新 连接 
echo "retry: 120000" . PHP_EOL; 


// 保 存 开 始 时 间 
$startTime = time(); 


dof{ 
// 发 送 消息 
$currentTime = date("h:i:s", time()); 
echo "data: " . $currentTime . PHP_EOL; 
echo PHP_EOL; 
flush(); 
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// 如 果 过 了 1 分 钟 ， 


结束 脚本 


if ((time() - $startTime) > 60) { 


die(); 
} 


// 等 5 秒 钟 ， 发 送 新 消息 


sleep(5); 
} while(true); 
?> 


这 样 , 等 再 运行 脚本 时 , 就 可 以 做 到 用 1 分 钟 时 间 来 更 新 , 然后 暂停 服务 2 分 钟 (参见 图 12-5 )。 
对 于 较 复杂 TO a 条 特殊 的 消息 ， 告 诉 它 不 必 等 待 





数据 更 新 ( 比如 股市 今天 





已 经 停止 交易 了 )。 此 时 , 网 页 


页 就 可 以 调用 EventSource 对 象 的 close() 















































方法 。 
DD Server-Sent E ents Vo Lele 区 | 12-5: 这 | 个 页 面 使 用 了 消息 CN 流 ( 在 1 分 钟 时 
€ 3 © [© locaihosmSeverEventshtm ae 间 内 发 送 一 批 消息 ) ， 然 后 使 用 轮 询 ( 等 待 2 





Started listening for messages. 
New web server time received: 
New web server time received: 
New web server time received: 
New web server time received: 01: 
New web server time received: 
New web server time received: 
New web server time received: 
New web server time received: 
New web server time received: 
New web server time received: 01: 
New web server time received: 
New web server time received: 
New web server time received: 
New web server time received: 
New web server time received: 
New web server time received: 


01:49:03 
01:49:08 
01:49:13 

:18 


口 





01: 49: 23 
01:49:28 
01:49:33 
01:49:38 
01:49:43 


口 





48 
01: 49: 33 
01:49:58 
01:50:03 
01:50:08 
01:52:08 
01:52:13 





01:52:13 








Stop Listening 














分 钟 js 这 种 方案 有 助 于 减少 Web 服 务 器 的 流 
量 ， 但 要 考虑 数据 更 新 的 频率 及 保持 数据 最 
新 的 必要 程度 








计 
Bu 


如 


对 于 复杂 的 服务 器 脚本 ， 浏 


览 器 的 自动 重新 连接 行为 有 时 候 并 不 好 对 付 。 比 如 ，Web 服 
务 器 可 能 会 在 执行 某 个 任务 期 间 就 把 连接 断 开 。 这 种 情况 下 ， ete 器 代码 会 给 给 每 个 
客户 端 发 送 一 个 ID ( 如 12.2.2 节 所 述 )， 
服务 器 端 代 码 必 须 负责 
以 及 在 停止 处 进行 恢复 等 。 所 有 这 些 都 需要 你 具有 丰富 的 编码 经 验 。 


以 便 重 新 连接 时 再 把 这 个 ID 发 给 服务 器 。 可 是 ， 
生成 ID、 ie a ne ee 
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12.3 Web Socket 


服务 器 发 送 事 件 非常 适合 从 服务 器 连续 不 断 地 接收 消息 。 但 整个 通信 完全 是 单 向 的 , 无 法 知 
道 浏览 器 是 否 响应 ， 也 不 能 进行 更 复杂 的 对 话 。 

如 果 你 想 创建 一 个 应 用 ,浏览 器 与 服务 器 需要 正式 对 话 ， 那 你 很 可 能 使 用 XMLHttpRequest 对 
象 ( 而 不 用 Flash )。 使 用 XMLHttpRequest 对 象 在 很 多 情况 下 没有 问题 ， 但 同样 也 有 很 多 情况 不 合 
适 。 首 先 ，XMLHttpRequest 不 适合 快速 地 来 回 发 送 多 条 消息 ( 比如， 聊天 室 )。 其 次 , 没有 办 法 将 
一 次 调用 与 下 一 次 调用 联系 起 来 ,每 次 网 页 发 送 请 求 ， 服 务 器 都 要 确定 请 求 来 自 何方 。 在 这 种 情 
况 下 ， 要 想 把 一 系列 请 求 关联 起 来 ， 服 务 央 端 代码 会 变 得 非常 复杂 。 

有 一 个 方案 能 解决 这 个 问题 ， 这 不 是 频 狂 。 这 个 方案 就 是 Web Socket 标 准 。 根 据 这 个 标准 ， 
浏览 器 能 够 保持 对 Web 服 务 器 打开 的 连接 ， 从 而 与 服务 器 长 时 间 交 换 数据 。Web Socket 标 准 让 开 
发 人 员 非 常 兴 奋 ， 而 且 已 经 获得 相当 多 的 浏览 器 支持 ( 见 表 12-2 )， 但 IE 到 IE10 之 后 才 支 持 。 


表 12-2 浏览 器 对 Web Socket 的 支持 情况 
IE Firefox Chrome Safari Opera Safari iOS Android 版 Chrome 
最 低 版 本 10 11 14 6 12.1 6 29 




















提示 Web Socket 有 点 繁琐 。 比 如 ， 在 支持 它 的 浏览 器 上 运行 也 会 出 问题 ， 可 能 是 因为 电脑 网 
络 设置 的 限制 、 防 火 墙 或 者 杀毒 软件 。 如 果 不 确 定 你 的 电脑 是 否 能 用 Web Socket， 用 
http://websocketstest.com 测 试 一 下 。 这 个 网 站 会 尝试 连接 一 个 测试 服务 器 ， 并 且 生 成 一 个 
单 页 报告 告诉 你 Web Socket 是 否 在 运行 。 





使 用 Web Socket 之 前 ， 必 须 理解 两 点 。 第 一 ，Web Socket 是 一 种 专用 手段 ， 非 常 适合 开发 聊 
天 室 、 大 型 多 人 游戏 , 或 者 端 到 端的 协作 工具 。 利 用 它 能 开发 出 很 多 新 应 用 , 但 怒 怕 不 太 适 合 今 
天 JavaScript 驱 动 的 Web 应 用 ( 比如 电子 商务 站 点 )。 

第 二 ，Web Socket 方 案 做 起 来 可 能 会 无 比 复杂 。 网 页 中 的 JavaScript 很 简单 ， 可 服务 器 端 代码 
不 好 写 , 为 此 必须 熟练 掌握 编程 技能 ， 而 且 要 对 多 线程 和 网 络 模 型 有 深刻 理解 ， 这 些 超出 了 本 书 
的 范围 。 但 是 ， 如 果 其 他 公司 、 服 务 商 或 者 编程 牛人 已 经 创建 了 一 个 可 用 的 Web Socket 服 务 ， 你 
只 需 具备 一 点 HIML5S 相 关 的 JavaScript 知 识 就 能 看 懂 代 码 了 。 接 下 来 的 几 节 会 详细 介绍 。 





















































12.3.1 Web Socket 服 务 器 


I 


为 了 使 用 Web Socket， 需 要 在 Web 服 务 器 上 运行 一 个 程序 (也 叫 Web Socket 服 务 器 )。 这 个 条 
序 负责 协调 各 方 通信 ， 而 且 启 动 后 就 会 不 间断 地 运行 下 去 。 


出 
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注意 很 多 Web 主 机 不 允许 长 时 间 运 行程 序 ， 除 非 你 购买 的 是 专用 服务 器 ( 只 分 配给 你 的 网 站 
使 用 ， 不 与 他 人 共享 )。 如 果 你 使 用 的 是 共享 主机 ， 那 很 可 能 无 法 创建 使 用 Web Socket 
的 网 页 。 就算 你 能 启动 Web Socket 服 务 器 ， 让 它 不 间断 运行 ，Web 主 机 商会 检测 它 并 把 它 
关 掉 。 














为 了 让 读者 了 解 Web Socket 服 务 器 是 干什么 的 ， 下 面 列 出 了 与 它 有 关 的 一 些 任务 。 

口 设置 消息 “词汇 表 ”， 即 确定 哪些 消息 有 效 ， 这 些 消息 有 什么 含义 。 

口 记录 当前 连接 的 所 有 客户 端 。 

口 检测 向 客户 端 发 送 消 息 是 否 出 错 ， 如 果 客 户 端 已 经 停止 响应 ， 则 终止 与 该 客户 通信 。 

口 处 理 内 存 数 据 , 也 就 是 所 有 Web 客 户 端 都 可 以 访问 的 数据 。 可 能 涉及 很 多 微妙 的 问题 ， 比 
如 一 个 客户 端 要 加 入 ， 而 另 一 个 客户 端 要 退出 ， 这 两 个 客户 端的 连接 都 保存 在 同一 个 内 
存 对 象 中 。 

多 数 开发 人 员 都 没有 利用 Socket 创 建 过 服务 器 端 程序 ， 因 为 这 样 做 明显 代价 太 大 。 最 简单 的 

办 法 是 安装 别人 写 好 的 Web Socket 服 务 器 ， 然 后 再 设计 网 页 来 与 之 通信 。Web Socket 标 准 的 

JavaScript 部 分 使 用 起 来 很 容易 ,不 会 有 什么 问题 。 而 男 一 个 部 分 可 以 采取 别人 写 好 的 Socket 服 务 

器 代码 ， 根 据 需 要 稍 加 改动 即 可 。 目 前 ， 有 很 多 现成 的 Web Socket 服 务 器 项 目 (其 中 不 乏 开源 和 

免费 的 )。 这 些 项 目 致力 于 实现 各 种 功能 ,也 支持 很 多 种 服务 需 端 编程 语言 。12.3.3 节 将 详细 介绍 

一 些 项 目 。 
























































12.3.2 ”简单 的 Web Socket 客 户 端 








从 网 页 的 角度 看 ，Web Socket 很 容易 理解 ， 也 很 容易 使 用 。 第 一 步 就 是 创建 Websocket 对 象 ， 
传人 一 个 URL， 比 如 : 

var socket = new WebSocket("ws://localhost/socketServer.php"); 

这 个 URL 以 ws:/ 开 头 ， 是 一 个 表示 Web Socket 连 接 的 新 协议 。 不 过 ，URL 仍 然 指向 服务 器 上 
的 一 个 Web 应 用 ( 即 这 里 的 socketServerphp 脚 本 )。Web Socket 标 准 还 支持 以 wss:/ 开 头 的 URL， 
表示 安全 、 加 密 的 连接 ( 这 中 请 求 网 页 时 使 用 https:/ 而 不 是 http:// 一 样 )。 











注意 Web Socket 并 不 仅 限 于 连接 自己 的 Web 服 务 器 。 你 的 网 页 可 以 打开 一 个 到 其 他 Web 服 务 器 
的 Web Socket 连 接 ， 而 不 会 增加 任何 工作 量 。 


创建 Websocket 对 象 后 ， 页 面 就 会 尝试 连接 服务 器 。 下 一 步 ， 就 是 使 用 Mebsocket 对 象 的 4 个 事 
件 : on0pen、onError 、onClose 和 onMessage。 其 中 ，on0pen 会 在 建立 连接 后 触发 ，onError 会 在 出 
现 问题 时 触发 , onClose 会 在 连接 关闭 时 触发 , 而 onMessage 会 在 页 面 从 服务 器 接收 到 消息 时 触发 。 
利用 这 些 事件 ， 就 可 以 实现 与 Web Socket 服 务 器 的 通信 : 
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socket.onopen = connectionOpen; 
socket .onmessage = messageReceived; 
socket .onerror = errorOccurred; 
socket .onopen = connectionClosed; 


比如 ， 连 接 成 功 后 ， 需 要 向 服务 器 发 送 一 条 消息 。 发 送 消息 要 使 用 MebSocket 对 象 的 send() 
方法 ， 这 个 方法 接收 纯 文本 内 容 作为 参数 。 下 面 就 是 处 理 on0pen 事 件 并 发 送 消息 的 函数 : 


function connection0pen() { 
socket .send("UserName: jerryCTadivo23@gmail.com "); 


} 

可 想 而 知 ， 服 务 器 在 收 到 这 条 消息 后 ， 会 发 回 一 条 新 消息 。 

利用 onError 或 onClose 事 件 ， 可 以 向 用 户 发 出 通知 。 不 过 ,最 重要 的 事件 还 是 onMessage， 每 
当 Web 服 务 器 发 来 新 数据 时 ， 都 会 触发 这 个 事件 。 同 样 ， 响 应 这 个 事件 的 JavaScript 代 码 也 非常 好 
理解 ， 主 要 是 从 事件 对 象 的 data 属 性 中 取得 消息 内 容 : 


function messageReceived(e) { 
alert("You received a message: " + e.data); 


} 

如 果 网 页 认为 通信 可 以 结束 了 ， 可 以 调用 close() 方 法 关闭 连接 : 

socket.close(); 

但 是 ,一 旦 socket 关 闭 ， 就 不 能 再 发 送 消息 了 ， 除 非 重新 创建 Websocket 对 象 。 重 建 socket 
对 象 和 第 一 次 创建 一 样 一 一 用 new 关 键 字 ， 传 和 RL， 并 绑 定 所 有 的 事件 回调 函数 。 如 果 和 需要 频 
繁 地 连接 与 断 开 ， 可 以 把 这 些 代码 封装 到 独立 的 函数 里 以 方便 调用 。 

如 你 所 见 ，websocket 对 象 惊 人 地 简单 。 事 实 上 ， 我 们 已 经 介绍 完 它 所 有 的 方法 和 事件 了 。 
经 过 以 上 简单 介绍 ， 我 们 知道 使 用 其 他 人 写 好 的 Web Socket 服 务 器 并 不 费事 ， 只 要 知道 发 送 什么 
消息 ， 以 及 服务 需 会 发 回 什 么 消息 即 可 。 







































































注意 建立 Web Socket 连 接 时 ,后 台 其 实 会 执行 很 多 处 理工 作 。 首 先 ,网 页 要 使 用 常见 的 HTTP 
标准 与 服务 器 建立 联系 ， 然 后 再 把 连接 “升级 ”到 Web Socket 连 接 ， 以 便 浏览 器 与 服 
务 器 能 够 双向 通信 。 此 时 ， 如 果 计 算 机 与 服务 器 之 间 有 代理 服务 器 (比如 在 公司 网 络 
中 )， 可 能 会 遇 到 问题 。 代 理 服务 器 可 能 会 拒绝 请 求 并 断 开 连接 。 对 于 这 种 问题 ， 可 以 
检测 失败 的 连接 (通过 WebSocket 对 象 的 onError 事 件 )， 然 后 使 用 http://tinyurl.com/ 
polyfills 中 的 Socket“ 腻 子 脚本 ”来 作为 后 备 。 这 些 脚 本 会 使 用 轮 询 来 模拟 Web Socket 
连接 。 


12.3.3 ”使 用 现成 的 Web Socket 服 务 器 


你 想 自 己 试 试 Web Socket? 没 问 题 ， 网 上 有 很 多 Web Socket 服 务 器 可 供 你 搭建 试验 环境 。 
可 以 先 试 下 www.websocket.org/echo.html, 这 个 页 面 提 供 了 一 个 最 基本 的 Web Socket 服 务 
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器 : 你 向 它 发 送 消息 ， 它 再 返回 同样 的 消息 ( 参见 图 12-6 )。 虽 然 这 谈 不 上 有 意思 ， 


我 们 熟悉 WebSocket 对 象 的 所 有 功能 。 事 实 上 ， 
一 种 练习 Web Socket 编 程 技能 的 好 方法 。 
中 是 ws://echo.websocket.org ), 代码 就 能 正 














地 电脑 上 。 








但 却 全 


让 








你 还 可 以 创建 自己 的 页 面 和 服务 器 交互 ， 
0 的 Web Socket 服 务 器 URL ( 在 这 个 例子 
运行 , 不 管 页 面 是 在 一 个 不 同 的 域 下 还 是 存在 本 











这 是 








Try it out 


(¥) This browser supports WebSocket 


walks you creating a WebSocket yourself 






































Location: 


Connect | Disconnect | 


Message: 
| IRock it with HTML5 WebSocket 


| [Send ] 





SENT: Rock tt with HTMLS W cl 
RESPONSE Rock tw 种 HTMLS W. 








| Clear log 











服务 器 发 送 给 浏览 器 发 送 给 
浏览 器 的 消息 服务 器 的 消息 


CT 树 旦 寿 号 图 12-6: 只 会 重复 发 送 浏览 
€ 3 C |© websocketorg/echc ne i 器 所 发 送 消息 的 Web Socket 
2 服务 器 。 虽 然 没 有 什么 惊人 
总 WebSocket.org 的 创意 ， 但 却 能 让 你 体验 到 
Home Demos AllAboutWebSocket BenefitsofWebSocket | 与 现成 的 Web Socket 服 务 器 

SEE 对 话 有 多 么 简单 

Echo Test 

The first section of this page will let you do an HTML5 WebSocket test against the echo server The second section 








下 面 这 段 JavaScript 代 码 不 难 理解 ， 第 一 个 任务 是 在 页 面 第 一 次 加 载 完 成 时 创建 socket 对 
象 并 且 绑 定 所 有 的 事件 : 





var socket; 


window.onload = 


connect(); 


} 





function () { 


function connect() { 
socket = new WebSocket("ws://echo.websocket.org") 


// 监听 所 有 Web socket 事 件 


socket .onopen 


= connectionOpen; 


socket .onmessage = messageReceived; 
socket .onerror = errorOccurred; 
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Socket .onopen = connectionClosed; 





这 里 ，socket 连 接 的 代码 移 到 了 一 个 专门 的 函数 connect() 里 ， 以 便 随 时 调用 。 这 样 就 可 以 随 
心 所 欲 地 连接 和 断 开 。 前 面 已 经 介绍 过 断 开 连接 的 代码 : 


function disconnect () { 
socket.close(); 


} 

顺便 说 一 下 ， 可 以 查看 socket 对 象 的 readystate 属 性 来 判断 它 是 以 下 哪 种 状态 打开 并 且 准 
备 就 绪 ( readystate 是 1 )、 还 没 建立 (0 )、 关 闭 过 程 中 (2 )、 已 关闭 (3 )。 

服务 器 没有 真正 要 说 的 话 ， 它 对 所 有 消息 都 做 一 样 的 处 理 ， 只 是 简单 地 把 文本 返回 到 页 面 。 
正 因为 如 此 简单 ， 只 需 简单 地 在 用 户 点 击 一 个 按钮 时 将 文本 输入 框 中 当前 的 内 容 发 送 给 服务 顺 。 

function sendMessage() { 


// 获 取消 息 数 据 
var message = messageBox.value; 





// 通 过 socket 发 送 消 息 
socket.send(message); 


// 告 诉 用 户 刚刚 发 生 了 什么 
messageLog.innerHTML += "<br>" + "Sent: " + message; 


将 收 到 的 消息 插入 页 面 也 很 容易 : 


function messageReceived(e) { 
messageLog.innerHTML += "<br>" + "Message received: " + e.data; 


注意 如果 想 看 更 有 趣 一 些 的 例子 , 可 以 访问 http://html5demos.com/web-socket。 登录 这 个 简 
单 的 Web Socket 服 务 器 ， 发 送 一 条 消息 ， 所 有 人 都 能 立即 收 到 消息 。 


Web Socket 服 务 器 
想 要 自己 做 一 个 实际 的 例子 ? 那 必须 得 有 一 个 能 与 网 页 通信 的 Web Socket 服务 器 。 虽 然 
如 何 编写 Web Socket 服务 器 超出 了 本 书 范围 (一 个 服务 器 程序 至 少 得 写 几 十 行 代 码 ), 但 网 上 
有 很 多 现成 的 测试 服务 器 可 以 拿 来 用 。 下 面 就 分 别 按 语言 列 出 几 个 来 ， 供 读者 参考 。 
口 PHP。 这 是 一 个 简单 的 项 目 ， 在 此 基础 上 可 以 用 PHP 来 编写 一 个 Web Socket 服 务 器 。 
地 址 是 : http://code.google.com/p/phpwebsocket。 
口 Ruby。 针 对 Ruby 的 Web Socket 服 务 器 有 不 少 ， 但 这 个 使 用 了 EventMachine 模型 ， 很 
受 欢 迎 。 地 址 是 : http://github.com/igrigorik/em-websocket。 
口 Python。 这 是 一 个 Apache 扩展 , 使 用 Python 增加 了 Socket 服 务 器 。 地 址 是 : http://code. 
google.com/p/pywebsocket。 
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口 .NET。 简 单 ， 可 不 能 这 么 说 。 这 个 功能 全 面 的 项 目 包 含 了 完整 的 Web Socket 服务 器 实 
现 ， 基 于 微软 .NET 平 台 和 CH# 语 言 。 下 载 地 址 是 : http://superwebsocket.codeplex.com。 
口 Java。 与 刚才 .NET 那个 项 目 类 似 , 但 是 用 纯 Java 写 的 。 地 址 是 : http://jwebsocket.org/。 
口 node.js。 不 同 的 人 可 能 会 有 不 同 的 看 法 ，nodejs (能 运行 JavaScript 的 Web 服务 器 ) 既是 

一 个 前 途 无 量 的 新 生 事物 ， 又 是 一 个 发 展 迅 猛 的 测试 工具 。 无 论 如 何 , 我 们 可 以 找到 一 个 

能 支持 它 的 Web Socket 服 务 器 ， 地 址 是 : http://github.com/miksago/node-websocket-server。 
口 Kaazing。 与 这 里 列 出 的 其 他 项 目 不 同 ，Kaazing 并 不 提供 Web Socket 服 务 器 的 代码 ， 
而 是 提供 一 个 成 熟 的 Web Socket 服务 器 ， 经 过 许可 你 可 以 在 自己 的 网 站 中 使 用 它 。 对 
于 想 要 冒险 的 开发 人 员 , 这 个 现成 的 工具 可 能 不 够 刺激 。 但 对 于 没有 那么 高 要 求 的 网 站 
来 说 ,使 用 它 还 是 挺 不 错 的 ,特别 是 它 的 客户 端 库 还 内 置 了 对 回调 的 支持 (首先 尝试 使 
用 Web Socket 标准 ， 然 后 再 尝试 Flash， 实 在 不 行 再 使 用 JavaScript 轮 询 )。 详 细 信 息 ， 
请 参考 这 里 : http://kaazing.com/products/html5-edition.html。 
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地 理 定 位 、Web Worker 和 历史 管理 


至 | | 目前 为 止 ， 我 们 已 经 介绍 了 HTML5 的 所 有 关键 主题 。 而 你 也 已 经 使 用 它 写 出 了 更 有 意 
义 、 结 构 更 清晰 的 标记 。 此 外 ， 本 书 还 讨论 了 HTML5 丰 富 的 图 形 功能 ( 视频 和 动态 绘 
图 )， 以 及 不 能 上 网 也 照样 可 以 使 用 的 基于 JavaScript 的 离线 应 用 。 
本 章 , 我 们 再 来 介绍 三 个 之 前 没有 提 到 的 JavaScript 新 功能 。 或 许 有 读者 了 解 过 了 , 这 些 功 能 
扩展 了 网 页 的 能 力 ， 只 要 编写 少量 JavaScript 代 码 即 可 。 下 面 就 请 这 三 个 新 功能 隆重 登场 。 
口 Geolocation 〈 地 理 定位 ) 。 尽 管 经 常 以 HTMLS 的 名 义 提 到 ， 但 地 理 定位 实际 上 是 一 个 单 
独 的 标准 ， 而 且 也 不 是 经 由 WHATWG (参见 1.1.3 节 ) 制定 的 。 地 理 定位 可 以 让 我 们 获得 
与 访客 位 置 相关 的 信息 : 反映 访客 当前 位 置 的 地 理 坐 标 。 
口 Web Worker。 随 着 Web 开 发 人 员 编写 大 量 JavaScript 来 武装 网 页 ， 把 一 些 任务 放 在 后 台 执 
行 变更 越 来 越 重要 。 这 些 任 务 可 能 要 花 相 对 较 长 时 间 才 能 完成 ， 而 在 后 台 静 静 地 、 无 干 
扰 地 运行 它们 已 经 成 为 大 势 所 趋 。 尽 管 也 可 以 使 用 计时 器 和 其 他 技术 ， 但 Web Worker 规 
范 提供 的 执行 后 台 任务 的 方案 更 简洁 。 
口 会 话 历 史 。Web 刚 刚 诞 生 的 时 候 ， 网 页 只 有 一 个 功能 : 显示 内 容 。 因 此 ， 人 们 把 时 间 大 都 
花 在 了 单 击 链接 ， 从 一 个 文档 跳 到 另 一 个 文 要 上。 而 今天 ，JavaScript 能 让 网 页 不 必 刷 新 
即 可 加 载 另 一 个 页 面 的 内 容 。 如 此 一 来 ， 也 就 创造 出 了 更 加 流畅 的 体验 。 可 是 ， 这 样 也 
导致 了 一 些 问题 ， 比 如 怎么 让 浏览 器 URL 与 当前 内 容 同 步 。 为 了 解决 这 个 问题 Web 开发 
人 员 想 出 了 各 种 办 法 ，HTMLS 则 为 此 提供 了 新 的 会 话 历史 机 制 。 
































注意 在 探索 这 三 个 功能 期 间 ， 读 者 会 更 深入 地 理解 现在 所 谓 的 HTML5 都 包含 什么 。 实 际 上 ， 
很 多 东西 最 初 都 只 是 一 个 好 想法 ， 后 来 被 整合 到 这 个 雄心 勃勃 的 标准 中 ， 然 后 不 断 充 实 
完善 ， 直 至 包含 很 多 解决 不 同 问题 的 新 功能 ， 而 所 有 这 些 功能 无 非 都 源 于 那么 几 个 核心 
概念 〈 比如 语义 化 、JavaScript 和 CSS3 )。 


13.1 地理 定 位 


Geolocation 可 以 让 我 们 确定 访客 在 地 球 的 什么 位 置 。 注意, 这 可 不 是 说 判断 用 户 在 哪个 国家 
或 者 哪个 城市 ， 而 是 说 确定 用 户 在 城市 的 哪 条 街道 上 ， 其 至 是 用 户 正 拿 着 智能 手机 在 哪里 上 网 ， 
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给 出 这 个 地 点 的 坐标 位 置 。 


注意 ”本 书 介绍 的 大 多 数 JavaScript 功 能 ， 最初 都 源 自 HTML5 规 范 ，W3C 接 手 后 ， 把 这 些 规范 逐 
一 地 分 离 了 出 来 。 但 Geolocation 不 是 这 样 的 ， 它 一 开始 就 不 属于 HTML5, 而 是 与 HTMLS5 
几乎 同时 成 长 起 来 的 。 不 过 ,很 多 人 到 现在 仍然 把 它 和 HTML5 混 为 一 谈 ， 把 它们 当成 同 
一 类 Web 新 技术 。 


13.1.1 地 理 定位 的 基本 原理 


只 要 不 是 神经 有 问题 , 人 们 都 会 提出 类 似 这 样 的 问题 : 几 行 代码 就 能 确定 我 现在 在 哪个 咖啡 
馆 里 面 ? 是 不 是 有 什么 隐藏 的 程序 在 跟踪 我 呀 ? 屋外 的 白色 面包 里 车 里 坐 的 是 什么 人 ? 

放心 吧 ,， 地 理 定位 跟 “ 黑 社会 老大 ” 真 扯 不 上 半点 关系 。 因 为 就 算 浏览 咒 支 持 地 理 定位 ， 如 
果 你 不 允许 ， 它 也 不 会 把 你 的 行踪 透露 给 浏览 器 〈 人 参见 图 13-1 )。 























- 瑟 古 各 图 13-1: 网 页 正 想 加 载 位 置 数 












































I Simple Geolocation | + | 据 ， Firefox 询 问 你 是 允许 一 次 
< OO prosetech.com/html5/Chapter 13/SimpleGeolocation.html C 会 四 > ( 单 击 Share Location )， 还 是 以 
= 省 
The Would you like to share your location with 后 都 人 ( Always Share )， 抑 
prosetech.com? 或 永远 不 允许 ( Never Share )。 
Learn More... 这 可 不 是 Firefox 有 礼貌 » 而 是 


Geolocation 标 准 要 求 浏览 器 必 

Ce 须 征 得 用 户 同意 ， 才 能 允许 网 
ways Share Location A > 

Se 站 访问 其 数据 


Never Share Location 


Share Location | | 


x NotNow 





























为 了 得 到 用 户 的 位 置信 息 , 浏 览 器 会 争取 位 置 提供 商 ( location provider ) 的 帮助 。 比 如 ,Firefox 
浏览 器 使 用 的 是 Google Location Services。 位 置 提 供 商 为 查找 位 置 要 付出 很 大 努力 ， 而 且 要 想 尽 
各 种 办 法 。 

对 于 通过 网 线 ( 不 是 无 线 ) 上 网 的 桌面 计算 机 来 说 ， 办 法 很 简单 ， 但 结果 不 太 准 确 。 用 户 一 
上 网 ,他 的 信息 就 会 通过 双 绞 线 在 计算 机 或 本 地 网 上 传输 ， 进 入 电话 线 , 或 者 拨号 连接 ( 令 人 和 钨 
和 )， 最 终 到 达 连 接 因特网 的 高 层 硬件 设备 。 这 个 设备 有 一 个 唯一 的 耳 地址 ， 靠 这 个 就 能 在 因 特 
网 上 找到 它 。 与 耻 地 址 对 应 ， 还 有 一 个 现实 中 的 邮政 地 址 。 
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注意 ”如 果 读 者 对 网 络 知识 比较 熟悉 ， 那 肯定 知道 自己 的 计算 机 与 其 他 计算 机 一 样 ， 都 有 自己 
的 卫 地 址 。 不 过 ， 这 个 IP 地 址 只 是 你 自己 私有 的 ， 目 的 是 区 分 你 的 计算 机 与 同一 网 络 中 
的 其 他 计算 机 (比如 厨房 里 的 笔记 本 或 背包 里 的 平板 )。 地 理 定 位 不 使 用 私有 IP 地 址 。 





位 置 提供 商会 把 这 两 个 信息 综合 起 来 。 首 先 ， 它 找到 你 连接 的 他 地 址 ， 然 后 ， 确 定 使 用 该 IP 
地 址 的 路 由 器 的 位 置 。 因 为 这 个 信息 是 间接 的 , 所 以 使 用 桌面 计算 机 时 的 地 理 定位 并 不 准确 。 比 
如 ， 你 在 芝加哥 西 郊 的 某 个 地 方 上 网 ， 而 你 的 位 置 可 能 会 出 现在 离 市 中 心 不 远 的 地 方 。 不 过 , 即 
便 是 如 此 不 准确 的 结果 也 还 是 有 用 的 。 如 果 你 正在 某 个 地 图 应 用 上 寻找 附近 的 披萨 店 , 那 你 可 以 
一 下 就 跳 到 自己 感 兴趣 的 区 域 一 一 你 们 家 附近 ， 即 使 离 你 家 还 有 一 段 距离 。 











注意 ”IP 地址 定位 是 最 粗略 的 地 理 定位 方法 。 如 果 还 有 更 好 的 数据 源 ， 位置 提 供 商 会 择优 选用 。 








如 果 你 在 使 用 笔记 本 或 移动 设备 无 线 上 网 , 那 位 置 提供 商会 寻找 你 附近 的 无 线 接 入 点 。 理想 
情况 下 , 位 置 提供 商会 查询 一 个 大 型 数据 库 ， 以 确定 你 周围 几 个 接 入 点 的 确切 位 置 , 然后 再 使 用 
三 角 测量 法 算出 你 的 位 置 。 

要 是 你 在 用 手机 上 网 , 位 置 提供 商 还 会 采用 类 似 的 三 角 测 量 法 , 但 使 用 的 是 信号 发 射 塔 的 位 
置 。 经 过 迅速 而 相对 准确 的 计算 ， 最终 得 到 的 位 置 误差 大 约 在 1000 米 。( 中 心 城区 等 繁华 地 带 的 
言 号 发 射 塔 相对 较 多 ， 因 此 地 理 定位 的 结果 也 更 准确 。) 

最 后 , 很 多 移动 设备 都 配 有 专用 的 GPS 组 件 。GPS 可 以 使 用 卫星 定位 , 误差 只 有 几米 。 但 GPS 
的 缺点 是 速度 慢 ， 耗 电 多 。 而 且 ，GPS 在 高 楼 林立 的 地 区 也 不 好 使 ， 因 为 高 大 的 建筑 物 会 屏蔽 信 
号 。 当 然 ， 到 底 用 不 用 GPS 完全 取决 于 你 自己 ， 这 一 点 将 在 后 面 介绍 (参见 13.1.4 节 )。 

当然 了 ， 还 有 其 他 技术 可 以 用 于 地 理 定位 。 位 置 提供 商会 想 更 多 办 法 获得 位 置信 息 ， 比 如 
RFID 世 片 、 蓝 牙 设 备 ， 以 及 由 Google Maps 设 置 的 cookie 等 。 




















提示 “还 可 以 使 用 另 一 个 工具 来 修改 自己 的 起 始 位 置 。 比 如 ，Chrome 迷 们 可 以 用 一 个 叫 Manual 
Geolocation( http://tinyurl.com/manual-geo ) 的 插件 ， 它 可 以 在 网 站 想 共 享 你 的 位 置 时 ， 
告诉 Chrome 提 供 哪里 的 位 置信 息 。 利 用 这 个 工具 甚至 可 以 伪造 位 置 ， 比 如 假装 自己 在 德 
洛 瓦 ,而 实际 上 是 在 荷兰 。 这 种 技术 不 只 是 用 来 做 间谍 活动 ,对 调试 有 定位 需求 的 Web 
App 也 非常 有 用 。 


关键 在 于 , 无 论 你 通过 什么 方式 上 网 一 一 就 算是 你 使 用 台式 机 , 地 理 定位 都 可 以 大 概 地 找到 
你 。 而 如 果 你 使 用 能 接收 电话 信号 或 者 配 有 GPS 芯片 的 设备 ， 地 理 定 位 的 坐标 将 惊人 地 精确 。 
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怎么 使 用 地 理 定 位 

在 理解 了 第 一 个 大 问题 一 一 地 理 定位 的 工作 原理 之 后 , 接 下 来 就 要 面临 第 二 个 问题 ， 即 为 
什么 要 使 用 地 理 定 位 ? 

要 回答 这 个 问题 ,必须 明和 白地 理 定 位 返回 的 结果 是 一 个 人 所 在 位 置 的 坐标 , 仅 此 而 已 。 你 
需要 利用 这 个 简单 但 却 基 本 的 信息 ， 进 一 步 取得 更 详细 的 位 置 数据 。 这 些 数据 可 能 来 自 Web 
服务 器 ( 一 般 都 要 涉及 访问 大 型 的 服务 器 端 数据 库 ), 或 者 其 他 地 理 位 置 Web 服务 ( 比如 Google 
Maps )。 

举 个 例子 , 如 果 你 在 现实 中 有 一 家 公司 , 那么 可 能 要 将 访客 的 位 置 与 你 自己 的 位 置 进行 比 
较 。 然 后 才 知 道 哪个 位 置 最 近 。 再 比如 ,要 是 你 正在 开发 一 款 社 交 应 用 ,那么 可 以 获得 一 群 人 
的 位 置信 息 ， 显 示人 他们 彼此 距离 有 多 近 。 当 然 , 还 可 以 根据 用 户 的 位 置信 息 ， 向 他 们 推荐 一 些 
服务 ， 比 如 布鲁克 宁 最 近 的 巧克力 店 , 或 者 最 近 的 出所 。 无 论 如 何 , 访客 的 地 理 位 置 坐 标 ， 只 
有 在 跟 更 多 的 地 理 数据 结合 起 来 时 才 有 意义 。 

13.1.5 节 将 以 Google Maps 为 例 介 绍 地 理 定位 的 应 用 。 至 于 其 他 公司 的 地 图 应 用 或 地 理 位 
置 服务 ， 我 们 就 不 多 介绍 了 。 


13.1.2 ”查找 访客 的 坐标 


地 理 定位 功能 实际 上 是 非常 简单 的 。 说 到 底 ， 主 要 就 是 navigator.geolocation 对 象 的 三 个 方 
法 : getCurrentPosition() 、watchPosition() 和 clearWatch()。 











注意 ， 可 能 有 读者 对 navigator 对 象 不 熟悉 ， 它 只 是 JavaScript 众 多 对 象 中 的 一 个 ， 它 的 属性 中 保 
存 着 当前 浏览 器 及 其 能 力 的 信息 。 其 中 ， 最 有 用 的 属性 莫 过 于 navigator.userAgent， 包 
含 了 关于 浏览 器 的 所 有 细节 ， 如 版 本 号 、 所 在 操作 系统 等 。 


要 取得 访客 的 位 置 ， 可 以 调用 getCurrentPosition() 方 法 。 当 然 ， 查 找 位 置 不 会 立即 返回 结 
果 ， 浏览 器 也 不 想 锁 定 页 面 等 待 位 置 数据 。 所 以 ，getCurrentPosition() 方 法 是 异步 的 ， 它 会 立 
即 执行 ， 但 不 会 阻塞 其 他 代码 。 完 成 地 理 定位 后 ， 它 会 触发 男 一 段 代 码 来 处 理 返 回 的 结 
噢 , 地 理 定位 会 通过 一 个 事件 来 告诉 我 们 它 完成 了 工作 , 这 与 图 片 加 载 完 毕 或 文本 文件 读 取 
完毕 时 触发 onLoad 事 件 类 似 ， 对 吗 ? 你 错 了 ，JavaScript 在 这 里 有 点 不 一 致 。 换 名 话说， 在 调用 
getCurrentPosition() 时 ， 你 要 提供 一 个 完成 函数 。 

下 面 就 是 一 个 例子 : 


navigator.geolocation.getCurrentPosition( 
function(position) { 
alert("You were last spotted at (" + position.coords.1latitude + 
"," + position.coords.longitude + ")"); 
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运行 这 段 代 码 ， 会 调用 getCurrentPosition() 并 传 给 它 一 个 函数 。 浏 览 器 确定 了 位 置 之 后 ， 
会 触发 传人 的 函数 ， 然 后 显示 一 个 对 话 框 。 图 13-2 展 示 了 Internet Explorer 中 看 到 的 结果 。 

为 了 让 代码 更 清晰 ， 可 以 把 完成 函数 的 定义 挪 到 getcurrentPosition() 调 用 语句 的 外 面 来 ， 
如 下 所 示 : 

function geolocationSuccess(position) { 


alert("You were last spotted at (" + position.coords.latitude + 
"," + position.coords.longitude + ")"); 

















lia 图 13-2: 上 : 首先 ， 要 同意 浏览 器 向 Web 服 务 
用 3 SimpleGeolocation,html Dr-r3X| fn yk So 器 透露 你 的 位 置信 息 。 下 : 结果 是 你 在 地 球 上 
全 simple Geolocation | | 的 坐标 















































The search has begun. 





SimpleGeolocation.html wants to track your physical location. 


Allow So 


























) 名] SimpleGeolocation.html Dr3x 














辣 simple Geolocation | | 





You were last spotted at (43.666698,-79.416702) 

















纺 100% 














然后 ， 在 调用 getCurrentPosition() 时 再 传人 函数 名 即 可 : 

navigator.geolocation.getCurrentPosition(geolocationSuccess); 

测试 的 时 候 ， 需 要 使 用 支持 地 理 定位 的 浏览 器 ,并 且 人 允许 网 页 访问 你 的 数据 。 另 外 ,建议 你 
把 页 面 上 传 到 测试 服务 器 ， 然 后 再 通过 浏览 带 打 开 。 和 否则 ， 有 可 能 遇 到 奇怪 的 现象 ( 例如 ,地理 
定位 无 法 处 理 错误 )， 而 有 些 浏览 器 〈 比如 Chrome ) 根本 不 会 检测 你 的 位 置 。 

“地 理 坐标 对 我 有 什么 用 吗 ? ” 间 得 好 。 我 们 马上 会 介绍 怎么 利用 这 个 地 理 数 据 ( 见 13.1.5 
节 ) 但 在 此 之 前 ， 有 必要 先 了 解 一 些 错误 处 理 和 地 理 定位 设置 的 知识 。 


确定 地 理 定 位 的 精确 程度 
调用 的 getCurrentPosition() 成 功 返 回 后 ,position 对 象 会 包含 两 个 属性 : timestamp( 确 
定 地 理 位 置 的 时 间 ) 和 coords (地理 坐标 )。 
从 上 面 的 例子 可 以 看 到 , coords 属性 是 一 个 对 象 , 包含 latitude ( 纬度 ) 和 longitude( 经 
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度 ) 属性 ， 用 以 确定 你 在 地 球 上 的 位 置 。 不 过 ，coords 属性 还 有 另外 一 些 信 息 ， 比 如 altitude 
(海拔 高 度 )、heading (移动 方向 ) 和 speed ( 移动 速度 )， 但 目前 尚未 有 浏览 器 支持 它们 。 

更 有 意思 的 是 accuracy (精度 ) 属性 ， 用 米 为 单位 表示 地 理 定位 信息 的 精确 度 。( 不 要 搞 
混 ，accuracy 属性 的 值 越 小 ， 表 示 地 理 定位 越 精确 。) 例如 ，accuracy 等 于 2135 米 ， 约 1.3 英 
里 ， 表 示 地 理 定位 在 该 范围 内 找到 了 当前 访客 的 位 置 。 为 了 好 理解 ， 可 以 想象 一 个 圆 ， 圆 心 是 
返回 的 地 理 坐 标 ， 半 径 是 2135 米 ， 而 访客 可 能 就 在 这 个 圆 形 区 域 中 的 某 个 地 方 。 

利用 accuracy 属性 可 以 确定 哪些 地 理 定 位 结果 不 能 用 。 比 如 ， 一 个 结果 的 精确 度 为 几 万 
米 ， 那 跟 没 有 定位 也 差不多 了 。 

if (position.coords.accuracy > 50000) { 


results.innerHTML = 
"This guess is all over the map."; 
} 


此 时 ,可 能 需要 通知 用 户 无 法 准确 定位 , 或 者 为 用 户 提供 一 个 文本 框 , 让 他 自己 输入 位 置 


1 


13.1.3 “处理 错误 


要 是 访客 不 愿意 共享 他 们 的 位 置 数据 , 那 地 理 定位 就 不 会 返回 位 置信 息 。 在 这 种 情况 下 , 根 
本 不 会 调用 完成 函数 ,而 页 面 也 没有 办 法 告诉 你 浏览 器 是 在 继续 挖掘 数据 ,还 是 遇 到 了 错误 。 为 
了 解决 这 个 问题 ， 可 以 在 调用 getCurrentPosition() 时 传人 两 个 函数 。 第 一 个 函数 在 页 面 成 功 取 
得 数据 时 调用 ， 第 二 个 函数 在 地 理 定 位 因 错 误 而 终止 时 调用 。 

下 面 就 是 一 个 同时 传 入 完成 函数 和 错误 函数 的 例子 : 


// 保存 显示 结果 的 页 面 元 素 
var results; 





















































window.onload = function() { 
results = document.getElementById("results"); 


// 如 果 浏 览 器 支持 地 理 定位 ， 取 得 访客 的 位 置 
if (navigator.geolocation) { 
navigator.geolocation.getCurrentPosition( 
geolocationSuccess, geolocationFailure 
); 


Tesults.innerHTML = "The search has begun."; 


else { 
Tesults.innerHTML = "This browser doesn't support geolocation."; 
} 
}; 


function geolocationSuccess(position) { 
results.innerHTML = "You were last spotted at (" + 


nm nm 


position.coords.latitude + "," + position.coords.longitude + ")"; 


} 
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code 和 





而 message 中 包含 着 对 问题 的 简短 描述 。 


问题 类 型 ; 
属性 用 于 确定 如 何 进行 下 一 步 的 处 理 。 


function geolocationFailure(positionError) { 
调用 错误 函数 时 ， 浏 览 絮 会 给 错误 函数 传人 一 个 错误 对 象 ， 这 个 对 象 有 两 个 属 1 
型 ， 








results.innerHTIML = "Geolocation failed."; 





} 
message。 其 中 ，code 属 性 是 一 个 数值 ， 表 示 
一 般 来 说 ，message 属 性 多 用 于 测试 ， 而 code 
下 面 是 修改 后 的 错误 函数 ， 检 测 了 code 属 性 所 有 可 能 的 值 : 


function geolocationFailure(positionError) { 


2) { 


if (positionError.code == 1) { 
positioning service can't be reached."; 


results.innerHTML = 
"You decided not to share, but that's OK. We won't ask again."; 


} 


else if (positionError.code == 





results.innerHTML = 
"The network is down or the 
else if (positionError.code == 3) { 
results.innerHTML = 
"The attempt timed out before it could get the location data."; 
results.innerHTML = 
"This the mystery error. We don't know what happened."; 


} 
else { 
注意 ”如果 你 是 在 本 地 计算 机 ( 而 非 真正 的 Web 服 务 器 ) 上 测试 页 面 ， 那 么 在 拒 
[可 以 传人 两 个 参数 : 一 个 成 功 函 数 ， 
FE。 这 三 个 选项 可 以 只 











传人 一 个 参数 ， 这 个 参数 是 一 个 对 象 , 用 于 设置 某 些 地 理 定位 

















下 面 这 个 例子 则 设置 了 三 个 选项 
navigator.geolocation.getCurrentPosition( 


) 
} 
息 后 ， 不 会 触发 错误 函数 。 
13.1.4 设置 地 理 定位 选项 
到 目前 为 止 , 我 们 已 经 知道 调用 getCurrentPosition() 时 
一 个 失败 函数 。 实 际 上 , 还 可 以 再 
选项 。 
可 以 设置 三 个 选项 , 每 个 选项 对 应 地 理 定位 选项 对 象 的 一 个 不 同 的 属 怕 
设置 一 个 ， 也 可 以 设置 多 个 。 下 面 这 个 例子 设置 了 名 为 enableHighAccuracy 的 选项 : 
navigator.geolocation.getCurrentPosition(geolocationSuccess, 
geolocationFailure, {enableHighAccuracy: true}); 
geolocationSuccess, geolocationFailure, {enableHighAccuracy: true, 
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timeout: 10000, 





maximumAge: 60000} 


这 两 个 例子 都 使 用 JavaScript 对 象 字面 量 设置 了 地 理 定位 选项 。 要 完美 地 运行 这 种 技术 , 就 要 
使 用 正确 的 属性 名 ， 比 如 enableHighAccuracy 和 timeout， 因 为 这 些 是 getCurrentPosition() 方 法 
要 求 的 属性 。( 如 果 这 上 段 代码 对 你 来 说 还 是 有 点 难 懂 ， 可 以 参考 附录 B 中 与 对 象 相关 的 介绍 。) 

好 了 ， 这 些 属 性 都 是 什么 意思 呢 ? enableHighAccuracy 属 性 要 求 高 精度 的 GPS 位 置 检测 ， 只 
要 设置 支持 ( 而 且 用 户 同意 )。 除 非 确 实 需要 精确 的 坐标 ， 否 则 不 要 设置 这 个 选项 ， 因 为 这 个 过 
程 很 费 电 也 很 耗 时 。 而 enableHighAccuracy 的 默认 值 ， 也 就 是 不 设置 它 时 的 值 ， 是 false。 

第 二 个 timeout 属 性 用 于 设置 在 最 终 放 弃 之 前 ,等 待 位 置 数据 的 时 间 , 以 毫秒 计 。 这 里 的 10 000 
毫秒 的 意思 就 是 最 多 等 10 秒 钟 。 用 户 按 下 同意 共享 数据 的 按钮 时 ,计时 开始 。 默 认 情 况 下 ,timeout 
的 值 是 9， 也 就 是 页 面 会 无 限期 地 等 下 去 ， 不 会 触发 超时 错误 。 

最 后 一 个 maximumAge 属 性 用 于 缓存 位 置 数据 。 比 如 ， 把 maximunAge 设 置 为 60 000 毫 秒 ， 之 前 
的 数据 最 多 保存 1 分 钟 。 这 样 就 可 以 减少 重复 调用 地 理 定位 的 次 数 ， 但 在 用 户 移动 的 时 候 ， 时 间 
越 长 结果 也 就 越 不 精确 。 默 认 情 况 下 ，maximumAge 的 值 是 0， 意 思 是 不 使 用 缓存 的 地 理 数 据 。( 也 
可 以 将 其 设置 为 一 个 特殊 的 值 Infinity， 表 示 只 要 有 缓存 的 数据 ， 就 使 用 该 数据 ， 无 论 时 间 多 久 
都 行 。) 














































































































13.1.5 ”显示 地 图 


取得 用 户 的 地 理 坐 标 当 然 值得 高 兴 , 但 除非 你 能 用 它 实现 更 有 用 的 功能 , 否则 这 种 兴奋 劲 也 
保持 不 了 多 久 。 精 通 地 理 定位 的 老手 深 知 ， 通 过 位 置信 息 可 以 挖掘 出 很 有 价值 的 东西 。( 这 里 的 
关键 在 于 取得 坐标 ， 然 后 在 Web 应 用 中 将 其 转换 为 一 种 有 用 的 形式 。) 我 们 知道 ， 有 很 多 不 错 的 
Web 应 用 ， 比 如 Google Maps。 事 实 上 据 估 计 ，Google Maps 是 人 们 日 常生 活 中 使 用 率 最 高 的 Web 
应 用 服务 ， 而 使 用 它 的 目的 千差万别 。 

比如 ， 可 以 使 用 Google Maps 创 建 一 个 地 图 ， 以 任何 大 小 显示 世界 上 的 任何 一 个 地 方 。 你 可 
以 控制 访客 能 对 地 图 进行 什么 操作 ,生成 行车 线路 , 而 最 有 用 的 则 是 把 自 定 义 的 数据 点 放 到 地 图 
上 面 。 比 如 ， 可 以 用 Google Maps 创 建 一 个 页 面 ， 显 示 你 们 公司 的 位 置 ， 或 者 标记 出 徒步 到 曼 哈 
顿 岛 旅行 必须 参观 的 景点 。 在 使 用 Google Maps 开 发 之 前 ， 请 先 看 看 这 份 文档 : 
http://tinyurl.com/maps-docs。 

































































注意 Google Maps 可 以 免费 使 用 , 而 且 可 以 在 商业 网 站 中 使 用 , 只 要 你 不 对 网 站 用 户 收 费 就 行 。 
(如 果 你 对 访客 收费 ,谷歌 还 有 付费 地 图 服务 ， 你 可 以 买 来 使 用 。) 虽然 Google Maps 在 许 
可 条 款 中 明确 表示 保留 在 地 图 上 显示 广告 的 权利 ， 但 至 今 还 没有 显示 广告 。 





图 13-3 展 示 了 前 面 地 理 定位 页 面 的 增强 版 ， 即 取得 用 户 坐标 后 ， 在 地 图 上 显示 出 他 的 位 置 。 
创建 这 个 页 面 很 简单 。 首 先 ， 链 接 到 Google Mpas API 脚 本 ， 而 且 要 把 它 放 在 使 用 地 图 功能 
的 自 定义 脚本 前 头 : 








346 | 第 13 章 地 理 定 位 、Web Worker 和 历史 管理 


<head> 


<meta charset="utf-8"> 


<title>Geolocation Map</title> 


</head> 


<body> 














<script src="http://maps.google.com/maps/api/js?sensor=true"></script> 


然后 ， 需 要 一 个 <div> 元 素 ， 让 它 戌 放 动 态 生 成 的 地 图 。 为 了 方便 引用 ， 还 要 给 它 一 个 ID: 
<p id="results">Where do you live?</p> 
<div id="mapSurface"></div> 
</body> 
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这 样 就 可 以 给 它 设置 样式 ,声明 地 图 的 大 小 : 
#mapSurface { 
width: 600px; 
height: 400px; 
border: solid 1px black; 











使 用 Google Maps 的 准备 工作 就 做 好 了 。 接 下 来 首先 要 考虑 显示 地 图 。 我 们 这 个 例子 是 在 页 
面 加 载 时 就 显示 了 地 图 ， 因 此 要 使 用 成 功 或 失败 函数 。( 执行 失败 函数 并 不 意味 着 访客 不 能 在 你 
的 页 面 中 使 用 地 图 ,而 只 是 说 你 没有 取得 访客 的 当前 位 置 。 这 时 候 还 是 可 以 显示 地 图 ， 只 不 过 显 
示 的 是 默认 位 置 。) 





13.1 
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以 下 就 是 页 面 加载 时 运行 的 代码 ， 首 先 创建 地 图 ， 然 后 通过 地 理 定位 查找 用 户 位 置 : 


var results; 
var map; 











window.onload = function() { 
results = document.getElementById("results"); 


// 设 置地 图 选项 。 这 个 例子 设置 了 起 始 缩放 级 别 和 地 图 类 型 
// 要 了 解 所 有 可 用 的 选项 ， 读 者 可 以 查看 Google Maps 的 文档 
var myOptions = { 

zoom: 13， 

mapTypeId: google.maps.MapTypeId.ROADMAP }; 


// 使 用 前 面 设置 的 选项 来 创建 地 图 
map = new google.maps.Map(document.getElementById("mapSurface"), myOptions); 


// 尝 试 取得 用 户 的 当前 位 置 

if (navigator.geolocation) { 
navigator.geolocation.getCurrentPosition(geolocationSuccess, 
geolocationFailure); 
Tesults.innerHTML = "The search has begun."; 

} 

else { 
Tesults.innerHTML = "This browser doesn't support geolocation."; 
goToDefaultLocation(); 

} 

}; 


即便 通过 以 上 代码 创建 了 地 图 ， 还 不 能 在 页 面 上 看 到 它 。 因 为 我 们 还 没有 设置 地 理 位 置 呢 。 
要 设置 地 理 位 置 , 得 用 LatLng 对 象 创建 一 个 坐标 点 , 然后 再 通过 地 图 的 setCenter() 方 法 把 该 点 放 
到 地 图 上 。 以 下 就 是 使 用 访客 坐标 创建 坐标 点 并 将 该 点 放 到 地 图 上 的 代码 : 
function geolocationSuccess(position) { 
// 把 地 理 定位 的 位 置 转换 为 LatLng 对 象 


location = new google.maps.LatLng( 
position.coords.latitude, position.coords.longitude); 







































































// 在 地 图 上 显示 这 个 点 的 位 置 
map.setCenter(location); 

有 了 这 些 代码 就 可 以 显示 地 图 了 ,结果 如 图 13-3 所 示 。 除 此 之 外 ,还 可 以 在 地 图 上 添加 一 些 
辅助 功能 ， 比 如 其 他 位 置 或 信息 气泡 。 就 拿 创建 信息 气泡 为 例 ， 需 要 创建 一 个 InfoNindow 对 象 。 
而 图 13-3 中 的 信息 气泡 就 是 用 下 面 的 代码 创建 的 : 

// 创 建 信息 气泡 并 设置 其 文本 内 容 和 地 图 坐标 
var infowindow = new google.maps.InfoWindow(); 


infowindow.setContent("You are here, or somewhere thereabouts."); 
infowindow.setPosition(location); 



































// 显 示 地 图 气泡 
infowindow.open(map); 
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results.innerHIML = "Now you're on the map. ; 


最 后 ， 如 果 浏 览 需 不 支持 地 理 定位 , 那么 处 理 方法 也 是 类 似 的 。 只 不 过 是 使 用 一 个 你 自己 知 
道 的 坐标 来 创建 地 图 而 已 。 


function geolocationFailure(positionError) { 


goToDefaultLocation(); 
} 


function goToDefaultLocation() { 
// 这 里 显示 纽约 地 图 
var newYork = new google.maps.LatLng(40.69847, -73.95144); 





map.setCenter(newYork); 


13.1.6 ”跟踪 访客 移动 


我 们 的 例子 一 直 在 使 用 getCurrentPosition() 方 法 ， 这 个 方法 可 以 说 是 地 理 定位 的 “心脏 ”。 
而 除 这 个 方法 之 外 , 地理 定位 对 象 还 有 两 个 方法 ， 用 于 跟踪 访客 的 位 置 ， 让 你 的 页 面 在 用 户 位 置 
改变 时 能 收 到 通知 。 

首先 是 watchPosition() 方 法 , 它 与 getCurrentPosition() 看 起 来 极为 相似 , 也 接收 三 个 参数 : 
成 功 函 数 ( 唯一 必需 的 参数 )、 失 败 函 数 和 选项 对 象 : 

navigator.geolocation.watchPosition(geolocationSuccess, geolocationFailure); 

但 watchpPosition() 与 getCurtrentpPosition() 的 区 别 在 于 ， 前 者 可 能 会 多 次 触发 成 功 函数 一 一 
不 仅 初 始 取得 位 置 时 会 触发 ， 而 且 以 后 每 次 检测 到 新 位 置 都 会 触发 。( 但 你 无 法 控制 设备 多 长 时 
间 检 测 一 次 新 位 置 。 你 只 要 知道 , 位 置 不 改变 , 设备 不 会 给 你 发 通知 ， 只 有 位 置 改 变 它 才 会 给 你 
发 通知 。) 对 桌面 计算 机 而 言 ， 因 为 它 不 会 动 , 所 以 watchPosition() 与 getCurrentPosition() 方 法 
实际 上 作用 相同 。 

与 getCurrentPosition() 不 同 , watchPosition() 返 回 一 个 数值 。 如 果 你 不 想 再 关注 位 置 变化 ， 
可 以 把 它 返回 的 这 个 数值 传 给 clearWatch() 方 法 。 当 然 ， 你 也 可 以 不 这 么 做 ， 而 在 用 户 切换 到 其 
他 页 面 之 前 一 直接 收 通知 : 


var watch = navigator.geolocation.watchPosition(geolocationSuccess， 
geolocationFailure); 
























































navigator.geolocation.clearWatch(watch); 


13.1.7 ”浏览 器 对 地 理 定 位 的 兼容 情况 
所 有 的 现代 浏览 器 都 能 很 好 地 支持 地 理 定位 功能 , 包括 移动 浏览 器 。 旧 版 的 下 是 个 例外 一 一 
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IE7 和 了 FE8 还 不 支持 地 理 定 位 。 想 要 照顾 到 旧版 下 的 用 户 ， 可 以 填补 这 个 空缺 。 有 很 多 可 以 解决 这 
个 问题 的 简单 JavaScript 库 。 通 常 ， 它 们 会 用 到 13.1.1 节 介绍 的 他 查找 技术 ， 这 是 最 简陋 的 地 理 定 
位 方式 。 比 如 ，http:/github.conyinexorabletash/polyfill 上 的 地 理 定 位 “腻子 脚本 ”就 是 抓 取 路 由 
需 的 了 地 址 ， 然 后 在 http:/freegeoip.net 的 数据 库 里 查找 它 的 地 理 位 置 。 

也 可 以 设 一 个 默认 的 起 始 位 置 ， 而 不 用 获取 用 户 的 当前 位 置 。 如 果 是 用 谷歌 地 图 的 话 , 可 以 
让 用 户 从 地 图 上 选取 一 个 点 ， 然 后 用 这 个 点 的 坐标 。Google Maps API 的 文档 里 有 一 些 这 样 的 例 
子 ，http://tinyurl.com/qbmqdsq 就 是 一 个 拦截 地 图 点 击 事件 的 例子 。 





























13.2 Web Worker 


想 当 初 ，JavaScript 刚 刚 问 世 的 时 候 ， 没 有 人 担心 它 的 性 能 。JavaScript 只 是 一 种 简单 的 语言 ， 
可 以 在 网 页 中 运行 小 段 脚 本 ,而 且 只 是 非 专 业 程序 员 的 玩具 。 谁 也 没有 把 它 当 做 一 门 能 撑 起 门面 
的 正规 语言 。 

转眼 20 年 过 去 了 ，JavaScript 已 经 成 为 Web 开 发 领域 的 王者 。 只 要 想 给 网 页 添加 交互 性 ， 开 发 
人 员 就 会 用 到 它 ， 无 论 是 游戏 还 是 地 图 ， 或 者 购物 车 和 漂亮 的 表单 。 然 而 ， 从 许多 方面 来 看 ， 
JavaScript 语 言 与 它 现在 的 地 位 相 比 ， 仍 然 还 有 一 些 不 相称 的 地 方 。 

比如 ,JavaScript 处 理 大 计算 量 任务 时 就 会 导致 问题 。 对 于 多 种 现代 编程 语言 来 说 , 这 种 大 计 
算 量 的 工作 都 是 在 后 台 完 成 的 ， 而 使 用 应 用 的 人 不 会 停 下 来 ， 也 不 会 受到 干扰 。 但 在 JavaScript 
中 ， 由 于 代码 始终 都 在 前 台 运 行 ， 因 此 耗费 时 间 的 代码 会 打 断 用 户 ， 阻 塞 页 面 ， 直 到 任务 完成 。 
对 这 个 问题 视而不见 ， 就 会 导致 访客 厌烦 ， 甚 至 永 不 再 光顾 你 的 网 页 。 



























































注意 为 解决 JavaScript 阻 塞 页面 的 问题 ， 很 多 一 线 开 发 人 员 想 出 了 各 种 招 。 比 如 ， 使 用 
setInterval() 或 setTimeout() 把 大 任务 分 成 小 任务 ， 每 次 只 运行 一 个 小 任务 。 这 个 办 法 
非常 适合 某 些 任务 ( 比如 ， 对 在 Canvas 上 实现 动画 就 很 合适 ， 参 见 9.4 节 )。 可是， 对 于 不 
能 拆 分 而 又 耗 时 很 长 的 任务 ， 这 个 办 法 会 增加 复杂 性 和 困扰 。 


HTML5 提 出 了 更 好 的 解决 方案 ， 一 个 叫 Web Worker 的 对 象 ， 能 够 在 后 台 完 成 工作 。 要 是 你 
有 比较 费时 的 工作 ， 就 可 以 创建 一 个 新 的 Web Worker 对 象 ,把 要 运行 的 代码 交 给 他 ,然后 让 它 运 
行 就 好 了 。 在 它 工作 期 间 ， 还 可 以 通过 传递 文本 消息 这 种 安全 但 受 限 的 方式 与 它 通信 。 

















Web Worker 安 全 措施 
在 JavaScript 中 使 用 Web Worker 可 以 在 后 台 运 行 代 码 ， 同 时 在 前 台 也 做 一 些 事 。 这 就 带 
来 了 编程 领域 中 的 一 个 尽 人 党 知 的 问题 : 如 果 应 用 同时 可 以 做 两 件 事 ,那么 其 中 一 件 事 有 可 能 
干扰 另 一 件 事 。 
这 个 问题 会 在 两 段 代码 争 抢 同一 处 数据 时 发 生 。 比如， 其 中 一 段 代码 想 读 取 菜 些 数 据 ,而 
另 一 段 代码 则 想 写 入 该 数据 ,或 者 两 段 代 码 同 时 想 设 置 一 个 变量 ,， 最 终 导 致 一 个 值 覆盖 另 一 个 
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值 , 再 或 者 两 段 代 码 以 不 同方 式 操作 同一 个 对 象 , 造成 对 象 状态 前 后 不 一 致 。 类 似 的 问题 很 多 ， 
没 办 法 一 一 列举 和 和 解决。 通常 ,一 个 多 线程 应 用 ( 即 在 多 个 线程 上 执行 不 同 代码 的 应 用 ) 在 测 
试 时 运行 得 很 好 ， 但 一 投入 正常 使 用 ， 就 会 出 现 令 人 头 疫 的 数据 不 一 致 问题 。 

现在 好 了 ， 有 了 JavaScript 的 Web Worker， 你 就 不 必 担 心 这 个 问题 了 。 因为 它 不 允许 你 
在 网 页 之 间或 Web Worker 之 间 共 享 数 据 。 你 可 以 把 数据 从 网 页 发 送 到 Web Worker 或 者 相反 )， 
但 JavaScript 会 自动 复制 一 份 ， 并 发 送 该 副本 。 这 意味 着 不 同 的 线程 不 能 同时 占用 相同 的 内 存 
区 域 ， 也 不 会 导致 微妙 的 问题 。 当 然 ， 这 种 简化 的 模型 也 会 限制 Web Worker 的 能 力 ， 但 能 力 
上 受到 细微 的 限制 却 能 换 来 安全 ， 免 得 那些 编程 高 手 搬 起 石头 砸 自己 的 脚 。 


13.2.1 费时 的 任务 


除非 用 于 那些 真正 费时 的 任务 ， 和 否则 很 难 发 挥 Web Worker 的 优势 。 换 句 话 说， 不 应 该 用 Web 
Worker 来 执行 简单 的 任务 。 而 对 于 那些 让 CPU 不 堪 重 负 ， 又 会 拖延 浏览 器 的 计算 任务 ， 使 用 Web 
Worker 的 结果 会 大 不 相同 。 比 如 图 13-4 所 示 的 搜索 素数 的 任务 ,我们 想 找 到 某 个 区 间 内 的 素数 。 
代码 很 简单 ， 但 这 个 任务 需要 的 计算 量 很 大 ， 因 为 要 进行 较 长 时 间 的 数值 运算 。 














ei 记 到 | 图 13-4: 选择 一 个 区 间 ， 然 
| cHTMLS\Chapter 12\primeNumberSearch Blocking.html 吕 ~ >X| 从 名 司 击 按 钮 开始 搜索 。 区 间 
G Prime Number Search b | 窄 ( 如 1 ~30 000 ) ) 任务 很 


Do a prime number search from 1 to 50000 | 快 能 完成 , 不 会 下 扰 任 何人 。 
但 范围 更 大 的 搜索 ( 如 1 ~ 


Start Searchi 
500 000 ) ， 会 导致 页 面 数 分 


钟 没 有 反应 。 这 时 候 不 能 单 
击 、 滚 动 ， 无 法 执行 任何 操 
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并 将 整个 页 面 灰 掉 


IN 











The results are herel 














四 1003% 了 
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很 明显 , 可 以 使 用 Web Worker 来 改进 这 个 页 面 。 但 在 此 之 前 , 我 们 先 看 一 看 这 个 例子 的 标记 
和 JavaScript 代 码 。 

标记 不 长 ， 也 很 简单 。 页 面 使 用 了 两 个 cinput> 控 件 ， 都 是 文本 框 。 还 有 一 个 用 于 搜索 的 按 
钮 和 两 个 cdiv> 元 素 ， 两 个 <div> 分 别 用 于 保存 结果 和 显示 状态 消息 。 以 下 就 是 <body> 元 素 中 的 全 
部 标记 : 

<p>Do a prime number search from <input id="from" value="1"> to 


<input id="to" value="20000">.</p> 
<button id="searchButton" onclick="doSearch()">Start Searching</button> 





<div id="primeContainer"> 
</div> 


<div id="status"></div> 
给 保存 素数 的 <div> 元 素 添 加 样式 有 点 意思 。 我 们 给 它 指 定 了 固定 高 度 和 一 个 最 大 宽度 ， 还 
设置 了 overflow 和 overflow-x 属 性 以 添加 垂直 滚动 条 ( 但 没有 水 平 滚动 条 ): 


#primeContainer { 
border: solid 1px black; 
margin-top: 20px; 
margin-bottom: 10px; 
padding: 3px; 
height: 300px; 
max-width: 500px; 
overflow: scroll; 
overflow-x: hidden; 
font-size: x-small; 


} 

这 个 例子 的 JavaScript 代 码 有 点 长 ， 可 并 不 复杂 。 代 码 会 取得 文本 框 中 的 两 个 数 ， 开 始 搜 索 ， 
然后 把 找到 的 素数 添加 到 页 面 中 。 查 找 素 数 的 任务 是 由 男 一 个 函数 完成 的 ， 该 子 数 名 叫 
findPrimes() ， 而 且 保 存在 另 一 个 JavaScript 文 件 中 。 
































提示 “要 理解 这 个 例子 或 者 Web Worker 的 作用 , 不 必 去 看 findPrimes() 函 数 ， 只 要 知道 这 是 个 费 
时 间 的 任务 就 行 了 。 不 过 ,假如 你 对 这 里 的 数学 运算 感 兴趣 ,或 者 想 自 己 写 一 个 搜索 素 
数 的 脚本 ， 也 可 以 在 本 书 站 点 上 找到 该 函数 的 完整 代码 : http://prosetech.com/html5 。 


下 面 是 doSearch() 函 数 的 完整 代码 : 

function doSearch() { 
// 取 得 指定 搜索 区 间 的 两 个 数 
var fromNumber = document.getElementById("from").value; 
var toNumber = document.getElementById("to").value; 


// 执 行 搜索 (这 一 步 花 时 间 ) 


var primes = findprimes(fromNumber, toNumber); 
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// 遍 历 素数 数组 ， 把 它们 转换 成 一 个 长 字符 串 

var primeList = ""; 

for (var i=0; i<primes.length; i++) { 
primeList += primes[i]; 
if (i != primes.length-1) primeList += ", "; 


} 


// 把 素数 字符 囊 插 入 页 面 中 
var displayList = document.getElementById("primeContainer"); 
displayList.innerHTML = primelist; 


// 更 新 状态 消息 ， 告 诉 用 户 当 前 情况 
var statusDisplay = document.getElementById("status"); 
if (primeList.length == 0) { 
statusDisplay.innerHTML = "Search failed to find any results."; 


} 
else { 
statusDisplay.innerHTML = "The results are here!"; 


} 
} 


看 到 了 吧 , 标记 和 代码 都 不 长 ,实际 上 可 以 说 是 简明 扼要 。 但 这 只 是 表面 上 能 看 到 的 ， 如果 
搜索 的 区 间 很 大 , 那 搜 索 过 程 会 得 变 慢 知 天 地 无 法 忍受 ,就 好 像 开 着 高 尔 夫 球 车 候 陡 坡 一 样 费劲 。 


13.2.2 ”把 任务 放 在 后 台 


Web Worker 为 解决 这 个 问题 定义 了 一 个 新 对 象 , 叫 Worker。 在 需要 在 后 台 执行 任务 时 ， 可 以 
创建 一 个 新 的 Worker， 交 给 它 一 些 代码 ， 然 后 发 送 给 它 一 些 数据 。 

下 面 这 行 代码 创建 了 一 个 新 的 Worker 对 象 ， 让 它 执行 PrimeWorkerjs 中 的 代码 : 

var worker = new Worker("PrimeWorker.js"); 

让 Worker 运 行 的 代码 都 要 放 在 一 个 单独 的 文件 中 。 这样 设 计 是 为 了 避免 新 手 让 Worker 引 用 全 
局 变量 ,或 者 直接 访问 页 面 中 的 元 素 。 这 两 个 操作 都 是 不 允许 的 。 



































注意 浏览 器 会 严格 保持 网 页 与 Web Worker 代 码 分 离 。 因 此 ， 不 可 能 让 PrimeWorkerjs 中 的 代码 
把 素数 直接 写 到 <div> 元 素 里 。Web Worker 必 须 把 相应 数据 发 送 给 页 面 中 的 JavaScript 代 
码 ， 然 后 再 通过 它 把 结果 显示 出 来 。 























网 页 与 Web Worker 之 间 通 过 消息 来 沟通 。 给 Worker 发 送 消息 要 使 用 该 对 象 的 postMessage() 
方法 : 

worker.postMessage(myData); 

然后 ，Worker 就 会 通过 onMessage 事 件 接收 到 该 数据 的 一 个 副本 。 此 时 ， 它 就 开始 工作 。 

类 似 地 ,如 果 Worker 需 要 跟 网 页 对 话 , 它 可 以 调用 自己 的 postMessage() 方 法 , 并 带 上 一 些 数 
据 。 而 网 页 同样 是 在 一 个 onMessage 事 件 中 接收 这 些 数据 。 图 13-5 展 示 了 上 述 通信 过 程 。 

我 们 先 说 一 个 要 注意 的 地 方 。 调 用 postMessage() 方 法 时 ， 只 能 给 它 传人 一 个 值 。 这 对 于 传 
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递 搜索 素数 的 区 间 来 说 是 一 个 问题 , 因为 区 间 由 两 个 值 确 定 。 我 们 的 方案 是 把 这 两 个 值 放 到 一 个 
对 象 字 面 量 中 (参见 附录 B )。 下 面 的 代码 是 一 个 例子 , 这 里 的 对 象 字 面 量 包含 两 个 属性 (第 一 个 
是 from， 第 二 个 是 to )， 每 个 属性 都 有 一 个 值 : 


worker.postMessage( 





















































{ from: 1， 
to: 20000 } 
); 
页 面 Web Worker 图 13-5， 这 里 演示 了 最 
(PrimeNumberSearch WebWorker.html) (Prime Worker.js) 简单 的 Web Worker 工 





芷 流程 ， 分 三 个 步骤 : 
页 面向 Worker 发 送 一 些 
常规 代 数据 , Worker 开 始 运行 ， 
常规 代码 调用 postMessage() onMessage 事 件 然后 Worker 再 向 页 面 发 


(例如 ) 响应 单 re 
击 按 钥 的 操作 在 这 里 执行 费时 的 任务 | | ”后 一 些 数据 












































onMessage 事 件 
在 这 里 更 新 页 















































注意 请 注意 ,你 可 以 给 Worker 传 入 任何 对 象 字 面 量 。 到 了 后 台 ,浏览 器 会 使 用 JSON( 参见 10.2.4 
节 ) 将 传 入 的 对 象 转换 为 无 害 字符 串 ， 复 制 它 ， 然 后 再 重新 将 其 转换 成 对 象 。 


了 解 了 这 些 细节 后 ， 就 可 以 对 前 面 看 到 的 dosearch() 冰 数 进行 一 番 改 进 了 。 这 里 ， 不 再 让 它 
自己 搜索 素数 ， 而 让 它 创建 一 个 Worker 来 承担 相应 的 任务 : 


var worker; 


function doSearch() { 
// 禁 用 按钮 防止 用 户 同时 输入 多 个 搜索 区 间 
searchButton.disabled = true; 


// 创 建新 的 Worker 
worker = new Worker("PrimeWorker.js"); 


// 指 定 onMessage 事 件 
// 以 便 从 Worker 那 里 收 到 消息 
worker.onmessage = receivedWorkerMessage; 


// 取 得 数值 范围 ， 发 送 给 Web Worker 
var fromNumber = document.getElementById("from").value; 
var toNumber = document.getElementById("to").value; 
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worker.postMessage( 
{ from: fromNumber, 
to: toNumber } 

); 


// 告 诉 用户 正 在 搜索 
statusDisplay.innerHTML = "A web worker is on the job ("+ 
fromNumber + " to " + toNumber + ") ..."; 


} 
现在 ，PrimeWorkerjs 开 始 工作 了 。 它 接收 到 onMessage 事 件 ， 执 行 搜索 ， 然 后 给 网 页 发 送 回 
一 条 新 消息 ， 包 含 找 到 的 素数 : 
onmessage = function(event) { 
// 网 页 发 过 来 的 对 象 保存 在 event .data 属 性 中 


Var fromNumber = event.data.from; 
var toNumber = event.data.to; 








// 在 该 数值 范围 内 搜索 素数 


var primes = findprimes(fromNumber, toNumber); 





// 搜 索 完成 ， 把 结果 发 回 网 页 
postMessage(primes); 


}; 


function findprimes(fromNumber, toNumber) { 
// (费事 的 素数 判断 过 程 部 在 这 个 函数 里 ) 
} 
在 Worker 调 用 postMessage() 的 时 候 ， 就 会 触发 onMessage 事 件 ， 进 而 会 调用 网 页 中 的 
receivedWorkerMessage() 范 数 : 


function receivedWorkerMessage(event) { 


// 取 得 素数 列表 
var primes = event.data; EE 


// 把 素数 显示 出 来 


// 启 动 搜 索 功能 
searchButton.disabled = false; 


} 

这 里 省 略 的 代码 与 在 上 一 节 看 到 的 一 样 , 就 是 把 素数 的 数组 转换 为 文本 , 然后 把 文本 插入 到 
网 页 中 。 

总 的 来 说 ,代码 的 结构 是 变 了 ,但 逻辑 相差 无 几 。 可 是 ,结果 呢 ? 完 全 不 一 样 。 现 在 ， 即 便 
搜索 大 量 的 素数 ， 页 面 也 能 保持 响应 。 可 以 滚动 页 面 、 在 文本 框 里 输入 、 选 择 之 前 搜索 的 结果 。 
要 不 是 页 面 底部 的 消息 ， 式 怕 没 人 会 知道 是 后 台 使 用 了 Web Worker。 
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提示 “你 的 Web Worker 需 要 使 用 另 一 个 JavaScript 文 件 中 的 代码 吗 ? 可 以 使 用 importScripts() 函 
数 。 假如 你 需要 在 PrimeWorker.js 中 调用 FindPrimes.js 文 件 中 的 函数 , 只 要 添加 下 面 这 行 代 
码 即 可 : 


importScripts("Findprimes.js"); 


离线 运行 Web Worker 

如 果 花 点 时 间 准 备 一 个 完整 的 Web Worker 的 例子 并 将 它 上 传 到 服务 器 ， 测 试 页 面 就 没 那 
么 复杂 。 当 然 , 在 现实 世界 里 ,在 桌面 上 试验 并 且 直 接 从 本 地 硬盘 运行 还 是 简单 许多 。 这 种 方 
式 在 Firefox 和 当前 版 本 的 I 上 有 效 ， 但 在 Chrome 上 无 效 ， 除 非 做 一 点 额外 的 工作 。 

如 果 是 从 本 地 打开 Web Worker 页 面 ，Chrome 需要 在 启动 时 带 上 参数 --allowfile- 
access-from-files。 在 Windows 中 , 这 可 以 通过 修改 Chrome 快捷 方式 ( 右键 点 击 并 选择 属性 ) 
来 实现 ， 或 创建 一 个 新 的 Chrome 快捷 方式 来 配置 。 不 论 采 用 哪 种 方式 ， 都 需要 将 参数 附加 到 
命令 行 的 后 面 。 比 如 ， 像 下 面 这 个 快捷 方式 路 径 : 

C:\Users\billcruft\ ... \chrome.exe 

要 修改 为 : 


C:\Users\billcruft\ ... \chrome.exe 
--allow-file-access-from-files 


现在 就 可 以 在 舒适 又 私密 的 个 人 电脑 上 调试 Web Worker 了 ， 不 需要 上 传 到 服务 器 。 


13.2.3 ”处 理 Worker 错 误 


我 们 知道 ，postMessage() 方 法 是 跟 Web Worker 通 信 的 关键 。 不 过 ， 还 有 一 种 方式 可 以 给 网 
页 发 送 通 知 一 一 用 onerror 事 件 告诉 网 页 有 错误 发 生 : 

worker.onerror = workerError; 

这 样 ， 如果 后 台 脚 本 遇 到 了 问题 或 因为 数据 无 效 出 现 错误 ，Worker 就 能 把 打包 的 错误 数据 发 
送 给 网 页 。 以 下 就 是 一 个 在 网 页 中 显示 错误 消息 的 示例 代码 : 


function workerError(error) { 
statusDisplay.innerHTML = error.message; 


} 

除了 message 属 性 外 ,错误 对 象 还 有 lineno 和 filename 属 性 , 分 别 保存 着 错误 所 在 的 行 号 及 文 
件 的 名 字 。 
13.2.4 ”取消 后 台 任 务 


学 习 了 一 个 简单 的 Web Worker 的 用 例 之 后 ， 下 面 该 考虑 如 何 改进 了 。 首先, 要 支持 取消 后 台 
任务 ,也 就 是 让 网 页 能 在 任务 执行 期 间 中 断 它 。 
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停止 Worker 工 作 的 方式 有 两 种 ， 一 种 是 Worker 对 象 调 用 自己 的 close() 方 法 ， 但 更 常用 的 是 
创建 Worker 对 象 的 页 面 调用 该 对 象 的 terzminate() 方 法 。 比 如 , 下 面 的 代码 就 可 以 用 来 响应 取消 任 
务 的 按钮 单 击 操作 : 


function cancelSearch() { 
worker.terminate(); 
statusDisplay.innerHTML = ""; 
searchButton.disabled = false; 


} 

单 击 这 个 按钮 就 可 以 停止 当前 的 搜索 任务 ， 重 新 启用 搜索 按钮 。 别 忘 了 ， 以 这 种 方式 停止 
Worker 之 后 ， 就 不 能 再 给 它 发 送 任何 消息 ， 也 不 能 让 它 执行 任何 操作 了 。 要 执行 新 的 搜索 任务 ， 
必须 创建 一 个 新 的 Worker 对 象 。( 现在 的 例子 正 是 这 样 做 的 ， 所 以 重新 启动 操作 没有 问题 。) 


13.2.5 ”传递 复杂 消息 


关于 Web Worker， 最 后 我 们 还 想 介绍 一 项 技术 ， 那 就 是 进度 信息 。 图 13-6 展 示 了 一 个 改进 后 
的 示例 页 面 ， 其 中 显示 了 进度 信息 。 




























































































| 到 tee 图 13-6， 在 搜索 素数 的 过 程 中 ， 会 不 断 更 新 
ETTEERT 此 | 一 | 状态 消息 ， 告 知 用 户 完成 了 百 分 之 多 少 。 要 
各) cNHTI apter 12\PrimeNumberSearch_WebWorker.html -| C 会 加- 如 
Nt = 更 好 看 一 点 的 话 , 可 以 像 图 5-7 那 样 用 一 个 
Do a prime number search from 1 to 500000 . 颜色 填充 的 进度 条 





Start Searching | | Cancel 


























16% done ... 


要 显示 进度 ，Web Worker 必 须 在 工作 的 同时 把 进度 百分比 发 给 页 面 。 我 们 知道 ，Web Worker 
只 有 一 个 与 创建 它 的 页 面 对 话 的 方式 ， 即 使 用 postMessage() 方 法 。 因 此 ， 要 发 送 进度 百分比 ， 
就 要 发 送 两 种 消息 : 进度 通知 〈 在 工作 过 程 中 ) 和 素数 列表 (工作 结束 后 )。 这 项 技术 的 关键 在 
于 明确 区 分 两 类 消息 ， 因 此 页 面 中 的 onMessage 事 件 处 理 程序 就 知道 哪个 是 进度 信息 ， 哪 个 是 结 
果 了 。 
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为 此 , 需要 在 发 送 消息 对 象 字 面 量 时 定义 不 同 的 属性 。 比 如 , 在 Web Worker 发 送 进度 信息 时 ， 
可 以 将 该 信息 命名 为 “Progress”， 而 在 发 送 素 数列 表 时 ， 将 其 命名 为 “PrimeList”。 

在 消息 对 象 字面 量 里 定义 新 的 属性 ， 是 我 们 前 面向 Web Worker 发 送 区 间 数 值 时 用 过 的 技巧 。 
这 里 的 新 属性 messageType 和 data， 分 别 用 于 描述 消息 类 型 和 数据 本 身 。 

好 了 ， 我 们 可 以 重 写 Web Worker 的 代码 ， 为 素数 列表 添加 一 个 messageType 属 性 : 


onmessage = function(event) { 
// 搜 索 素 数 


var primes = findPrimes(event.data.from，event.data.to); 




















// 发 回 结果 
postMessage( 
{messageType: "PrimeList"，data: primes} 


生 


下 

为 了 发 回 进度 信息 ，findpPrimes() 函 数 里 的 代码 也 要 调用 postMessage() 回 网 页 发 回信 息 。 这 
里 传递 的 对 象 字面 量 同样 包含 两 个 属性 : messageType 和 data, 但 此 时 前 者 声明 的 是 进度 通知 , 后 
者 指定 的 是 进度 百分比 : 


function findprimes(fromNumber, toNumber) { 





























// 计 算 进度 百分比 
var progress = Math.round(i/list.length*100); 


// 只 在 进度 变化 超过 1% 时 才 发 送 进度 百分比 信息 
if (progress != previousprogress) { 
postMessage( 
{messageType: "Progress", data: progress} 


previousprogress = progress; 
} 
i 
页 面 在 接收 到 这 个 消息 后 ， 首 先 要 检查 messageType 属 性 ， 以 便 知道 收 到 的 是 什么 数据 。 如 
果 是 素数 列表 ， 则 将 结果 显示 在 网 页 中 。 如 果 是 进度 通知 ， 则 更 新 进度 文本 : 


function receivedWorkerMessage(event) { 
var message = event.data; 





























if (message.messageType == "PrimelList") { 
var primes = message.data; 


// 显 示 素数 列表 ， 这 里 的 代码 与 前 面 例子 中 的 一 样 


} 
else if (message.messageType == "Progress") { 

// 报 告 当前 进度 

statusDisplay.innerHTML = message.data + "% done ..."; 
} 


} 
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注意 可 以 采取 另 一 种 方式 来 设计 这 个 页 面 。 可 以 让 Web Worker 每 找到 一 个 素数 时 就 调用 一 次 
postMessage() 方 法 。 这 样 网 页 就 可 以 实时 地 把 找到 的 素数 显示 出 来 。 显 然 ， 此 时 的 优点 
是 可 以 同步 显示 结果 ， 但 缺点 则 是 不 停 地 阻 断 页 面 ( 因为 Web Worker 查 找 素数 的 速度 很 
快 ) 到 底 怎 么 设计 才 好 呢 ? 这 取决 于 你 的 任务 ， 比 如 完成 任务 的 时 间 长 短 、 只 显示 部 分 
结果 有 没有 价值 、 得 到 每 部 分 结果 的 效率 如 何 ， 等 等 。 


利用 Web Worker 的 其 他 方式 
搜索 素数 的 例子 是 使 用 Web Worker 的 最 直观 方式 ， 即 执行 具有 明确 描述 的 任务 。 每 次 搜 
索 开始 , 页 面 都 会 创建 一 个 新 的 Worker 对 象 ， 每 个 Web Worker 对 象 独立 负责 一 项 任务 。 而 且 ， 
每 个 对 象 只 接收 一 个 消息 ， 然 后 发 回 一 个 消息 。 
恐怕 实际 开发 中 的 页 面 不 会 这 么 简单 。 下 面 我 们 列 出 一 些 可 能 的 情况 , 让 你 能 够 进一步 扩 
展 这 里 的 例子 ， 进 而 满足 自己 的 实际 需要 。 
口 在 多 个 任务 中 重用 Web Woker。Worker 对 象 完 成 既定 任务 ， 和 触发 onMessage 事件 处 理 
程序 后 并 不 会 被 销毁 。 它 只 会 闲置 在 那儿 , 等 待 新 的 任务 。 如果 你 再 给 它 发 送 新 的 消息 ， 
它 会 马上 进入 状态 ， 投 入 新 的 工作 。 
口 创建 多 个 Web Worker。 一 个 页 面 并 不 限于 只 能 创建 一 个 Worker 对象。 比如， 车 要 支 
持 访客 同时 搜索 多 个 区 间 内 的 素数 ， 就 需要 为 每 个 搜索 单独 创建 一 个 Worker， 然 后 通 
过 数组 来 跟踪 它们 。 这 样 ， 每 当 有 Worker 返回 结果 ， 就 可 以 把 结果 添加 到 页 面 中 ， 同 
时 注意 不 履 盖 其 他 Worker 的 结果 。( 为 了 稳妥 起 见 ， 还 是 建议 大 家 少 创建 Web Worker， 
它们 都 不 是 “省 油 的 灯 ?”， 一 次 运行 太 多 会 拖 慢 计算 机 。) 
口 在 一 个 Web Worker 中 创建 另 一 个 Web Worker。 每 个 Web Worker 都 可 以 创建 自己 的 
Web Worker， 向 它们 发 送 消息 ， 从 它们 那里 接收 消息 。 对 于 复杂 的 计算 任务 ， 比 如 计算 
斐 波 那 契 数 这 种 需要 递归 的 计算 ， 在 Worker 内 创建 Worker 可 以 派 上 用 场 。 
口 通过 Web Worker 下 载 数据 。Web Worker 可 以 使 用 XMLHttpRequest 对 象 (参见 12.1.1 
节 ) 取得 新 页 面 ， 或 者 向 Web 服务 发 送 请 求 。 取 得 了 所 需 的 信息 后 ， 它 们 可 以 调用 
postMessage() 方 法 ， 把 数据 发 回 页 面 。 
口 利用 Web Worker 执行 周期 性 任务 。 与 普通 网 页 中 的 脚本 一 样 ，Web Worker 可 以 调用 
setTimeout() 或 setInterval() 函 数 。 因 此 ， 可 以 通过 Web Worker 来 定期 检测 某 个 网 站 
是 否 有 新 数据 。 


13.2.6 ”浏览 器 对 Web Worker 的 兼容 情况 


浏览 器 对 Web Worker 的 支持 不 及 对 地 理 定 位 的 支持 那么 广泛 。 表 13-1 显 示 了 目前 的 支持 
情况 。 
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表 13-1 浏览 器 对 Web Worker 的 支持 情况 
IE Firefox Chrome Safari Opera SafariiOS Android 版 Chrome 
最 低 版 本 10 3.5 3 4 10.6 5 29 





那么 面 对 不 支持 Web Worker 的 浏览 器 该 怎么 办 呢 ? 最 简单 的 办 法 就 是 把 本 来 要 用 Web 
Worker 来 做 的 工作 放 到 前 台 来 做 : 


if (window.Worker) { 

// 浏览 器 支持 Web Worker. 

// 那么 为 什么 不 创建 一 个 Neb Worker 并 启动 呢 ? 
} else { 

// 浏览 器 不 支持 Web Worker. 

// 只 需 调 用 素数 搜索 函数 ， 然 后 等 待 . 
} 


这 种 方式 不 需要 写 额外 的 代码 ,因为 素数 搜索 函数 已 经 写 好 了 , 有 没有 Web Worker 都 可 以 调 
用 。 但 是 ， 如 果 任 务 较 大 ,这 种 方式 可 能 会 阻塞 浏览 器 的 运行 。 所 以 如 果 用 这 种 策略 ， 比 较 明 管 
的 方式 是 警告 用 户 ( 比如 ， 在 页 面 上 显示 一 条 消息 )， 告 诉 他 因为 浏览 器 不 支持 某 些 功 能 ， 计 算 
过 程 可 能 会 导致 页 面临 时 卡 顿 。 

还 有 一 种 替代 方案 ( 有 点 繁琐 ) 是 用 setInterval() 或 者 setTimeout() 伪 造 一 个 后 台 任务 。 比 
如 ， 可 以 写 一 些 代 码 ， 每 隔 一 段 时 间 测 试 几 个 数 。 一 些 “ 腻 子 脚本 ”甚至 试图 使 用 这 种 机 制 ( 参 
见 http://tinyurl.com/polyfills 中 Web Worker 部 分 )， 但 这 种 方式 很 容易 变 得 混乱 。 


13.3 ”历史 管理 


HTML5 添 加 了 会 话 历史 管理 功能 , 作为 对 JavaScript 历 史 对 象 的 扩展 。 这 个 功能 听 起 来 简单 ， 
但 要 知道 什么 时 候 或 者 说 为 什么 该 用 这 个 功能 ， 却 是 一 个 技巧 。 

什么 ,你 从 前 一 直 都 没 听 说 过 JavaScript 中 的 历史 对 象 ? 不 要 紧 , 到 目前 为 止 , 这 个 对 象 的 功 
能 很 有 限 。 说白 了 ,以 前 的 历史 对 象 只 有 一 个 属性 和 三 个 简单 的 方法 。 这 个 属性 是 length， 表 示 
浏览 器 的 历史 列表 中 有 多 个 条 记录 , 这些 记 录 是 你 在 上 网 期 间 访 问 过 的 页 面 的 列表 。 下 面 就 是 一 
个 使 用 历史 记录 的 小 例子 : 


alert("You have " + history.length + 
" pages in your browser's history list."); 


历史 对 象 中 被 用 得 最 多 的 方法 就 是 back() ， 能 够 让 访客 在 浏览 器 的 历史 记录 中 后 退 一 步 : 

history.back(); 

执行 这 行 的 效果 就 如 同 访客 单 击 了 浏览 嚣 的“ 后退” 按钮。 类 似 地 ， 调 用 forward() 方 法 可 
以 前 进一步 ， 或 者 调用 go() 方 法 并 指定 后 退 或 前 进 的 步 数 。 

除非 你 想 要 定制 后 退 和 前 进 按钮 ， 否 则 这 些 属性 和 方法 没有 多 大 用 处 。 但 是 ，HTML5 又 在 
此 基础 上 添加 了 一 些 功能 ， 从 而 让 你 能 实现 原来 想 做 但 很 难 做 到 的 事情 。 新 功能 的 核心 是 
pushstate() 方 法 ， 通 过 它 可 以 改变 浏览 锅 地 址 栏 中 的 URL， 同 时 不 会 导致 页 面 刷新 。 这 是 一 项 
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非常 贴心 的 技术 , 特别 适合 动态 加 载 新 内 容 , 同时 无 阻 滞 地 更 新 页 面 的 应 用 。 在 这 种 动态 页 面 中 ， 
URIL 与 页 面 内 容 无 法 一 一 对 应 , 会 出 现 第 一 个 页 面 加 载 了 另 一 个 页 面 的 内 容 后 , 其 URL 仍 然 保留 
在 浏览 器 地 址 栏 中 的 情况 。 而 此 时 浏览 器 的 收藏 夹 功 能 难以 反映 实际 情况 。 会 话 历史 管理 功能 ; 
我 们 提供 了 解决 这 个 问题 的 方案 。 

如 果 有 读者 对 上 面 描述 的 问题 不 太 理 解 , 请 稍 安 勿 躁 。 下 一 节 , 我 们 将 举 一 个 能 够 利用 会 话 
历史 的 例子 。 


13.3.1 。 URL 问题 


上 一 章 , 我 们 介绍 了 一 个 有 关中 国旅 游 的 网 页 , 其 中 包含 一 套 内 建 的 幻灯 片 (参见 12.1.3 节 )。 
在 那个 页 面 上 ， 单 击 Previous 和 Next 按 钮 ， 可 以 加 载 不 同 的 照片 。 但 该 例子 最 大 的 亮点 是 加 载 每 
张 照片 时 ， 不 会 刷新 页 面 ， 不 会 打 断 用 户 的 注意 力 ， 因 为 它 使 用 了 XMLHttpRequest 对 象 。 

但 是 , 类 似 这 样 的 动态 页 面 也 存在 一 个 广为人知 的 限制 。 即 使 页 面 因 为 加 载 了 新 页 面 而 有 所 
变化 ， 但 浏览 器 地 址 栏 中 的 URIL 却 保持 不 变 (图 13-7 )。 














eh 图 13-7， 这 里 是 ChinaSites. 
html 页 面 的 两 个 版 本 , 分 别 
加 载 了 不 同 的 幻灯 片 。 但 两 
个 页 面 的 URL 却 完全 相同 
( 都 是 ChinaSites.html ) 
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为 了 理解 这 个 问题 ， 可 以 设想 你 有 一 个 同事 小 乔 在 浏览 图 13-7 所 示 的 图 片 及 说 明 ， 他 看 到 了 
不 同 的 风景 , 但 真正 打动 他 的 则 是 第 五 张 幻灯 片 ， 那 张 幻灯 片 里 有 一 棵 许愿 树 。 小 乔 兴 奋 地 把 这 
张 幻灯 片 加 入 了 书签 ,然后 用 电子 邮件 把 URL 发 给 了 朋友 克莱尔 ， 又 在 Twitter 上 向 自己 的 粉丝 推 
荐 这 张 照片 (把 纸 谍 抛 到 树 上 ， 强 过 向 泉水 扔 硬币 ， 看 这 里 http:/,…”)。 然而 ， 当 小 乔 再 次 打开 
书签 ,克莱尔 单 击 邮 件 中 的 链接 ， 或 者 粉丝 们 在 Twitter 上 访问 小 乔 推荐 的 页 面 时 ， 他 们 看 到 的 都 
是 第 一 张 幻灯 片 。 这 时 候 ， 可 能 有 人 会 失去 耐心 ， 等 不 及 翻 到 第 五 张 幻灯 片 就 离开 了 ， 而 有 人 甚 
至 会 觉得 摸 不 着 头脑 一 一 这 个 链接 发 错 了 吧 ? 如 果 页 面 中 的 幻灯 片 不 止 5 张 ， 间 题 还 会 更 麻烦 ; 
Flickr 的 一 套 照片 可 能 多 达 数 十 张 甚至 数 百 张 。 
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13.3.2 ”以 往 的 解决 方案 : hashbang URL 


为 解决 这 个 问题 ， 很 多 人 采用 一 种 向 网 页 URL 末 尾 添 加 信息 的 方式 。 几 年 前 ，Facebook、 
Twitter 和 谷歌 这 些 大 公司 为 他 们 实现 的 一 种 叫 hashbang 的 技术 兴奋 不 已 ， 这 种 技术 也 极 富 争议 。 
所 谓 hashbang， 就 是 在 URL 末 尾 加 上 ##， 然 后 再 附加 一 些 信息 。 看 下 面 这 个 例子 : 

http://jjtraveltales.com/ChinaSites.html#!/Slides 

这 种 技术 的 依据 是 浏览 器 会 把 # 后 面 的 所 有 信息 当成 URL 的 附加 部 分 。 对 于 上 面 的 URL 来 说 ， 
浏览 器 会 认为 你 还 是 在 同一 个 ChinaSites.html 页 面 上 ， 只 不 过 末尾 加 了 一 些 附 加 信息 。 

男 一 方面 ， 如 果 JavaScript 代 码 在 修改 URL 时 没有 使 用 # 符 号 ， 结 果 会 怎么 样 呢 : 

http://jjtraveltales.com/ChinaSites.html/Slides 

这 样 的 话 ， 浏 览 器 会 马上 向 Web 服 务 右 发 送 请 求 ， 企 图 下 载 新 的 页 面 。 这 显然 不 对 。 

那 怎 么 实现 这 个 hashbang 技 术 呢 ?首先 ， 要 在 页 面 每 次 加 载 新 幻灯 片 时 改变 URL。( 在 
JavaScript 代 码 中 修改 location.href 属 性 即 可 。) 其 次 ， 要 在 页 面 首次 加 载 时 检测 URL， 取 得 附加 
信息 ， 然 后 据 以 从 Web 服 务 右 动态 地 获取 对 应 的 内 容 。 整 个 过 程 加 起 来 经 常会 搞 得 人 眼花 练 乱 ， 
好 在 有 现成 的 JavaScript 库 可 以 使 用 ， 比 如 PathJS ( https://github.com/mtrpcic/pathjs )。 有 了 这 些 库 ， 
实现 hashbang 技 术 就 简单 多 了 。 

最 近 ，hashbang 技 术 声 名 狼藉 ， 许 多 前 支持 者 也 完全 放弃 了 它 (具体 原因 见 随后 的 附注 栏 )。 
但 是 ，hashbang 仍 然 出 现在 一 些 通信 繁多 的 网 站 ， 比 如 Google Groups。 






























































为 什么 没 人 喜欢 hashbang 
近期 , hashbang 方案 被 广泛 使 用 也 饱 受 争议 。 今 天, Web 开发 者 们 决定 回 退 到 之 前 的 方案 ， 
原因 如 下 : 
口 URL 复杂 化 。Facebook 就 是 这 个 问题 的 典型 。 过 去 ,不 用 浏览 太 多 页 面 ，URL 很 快 就 
会 被 额外 信息 填 满 ， 变 成 类 似 这 样 : http:/www.facebook.com/profile.php?id=1586010043 
#l/pages/Haskell/401573824771。 如 今 ， 只 要 浏览 器 支持 ， 开 发 人 员 就 可 以 使 用 会 话 历史 
功能 了 。 

口 缺乏 灵活 性 。hashbang 页 面 在 URL 中 保存 了 很 多 信息 。 一旦 页 面 的 工作 方式 或 者 存储 信 

息 的 方式 改变 ， 那 么 原来 的 URL 就 完全 不 能 用 了 ， 这 是 很 多 网 站 无 法 访问 的 主要 原因 。 

口 搜索 引 人 擎 优化 。 搜 索引 擎 会 将 不 同 的 hashbang URL 看 做 一 个 页 面 。 对 于 ChinaSites.html 
来 说 ， 这 意味 着 搜索 引擎 不 可 能 索引 每 一 个 景点 ， 而 是 很 可 能 会 忽略 附加 信息 。 如 有 果 有 
人 搜索 “china wishing tree"， 很 可 能 不 会 在 结果 中 看 到 ChinaSites.html。 

口 Cool URL 问题 -Cool URL 就 是 那些 简短 、 明 确 一 一 更 重要 的 是 一 一 永远 不 会 变 的 URL。 
Web 之 父 带 姆 . 伯 纳 斯 李 在 一 个 页 面 中 (http:Wwww.w3.org/ProviderStyle/URIhtml ) 
解释 了 什么 是 CoolURL。 不 管 你 多 么 希望 自己 的 内 容 在 网 上 永存 ,都 改变 不 了 hashbang 
URL 难 维 护 的 事实 ， 因 此 不 可 能 成 为 Web 发 展 的 选择 。 
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目前 ， 就 使 用 hashbang 技术 时 该 如 何 变通 这 个 问题 ,虽然 很 多 开发 人 员 都 有 不 同 的 想法 ， 
但 大 多 数 人 都 认同 hashbang 只 是 Web 开发 历史 中 很 短 的 一 个 阶段 ， 很 快 就 会 被 HTML5 会 话 
历史 功能 取代 。 


13.3.3 ”HTML5 的 方案 : 会 话 历史 


HTMLS 的 会 话 历史 功能 为 以 上 URL 问 题 提 供 了 不 同 的 方案 。 会 话 历史 功能 允许 开发 人 员 把 
URIL 改 成 任何 形式 ， 而 不 必 非 要 使 用 滑稽 的 # 号 和 ! 号 。 比 如 ， 对 于 ChinaSites.html 页 面 中 的 第 四 
张 幻灯 片 ， 可 以 把 URL 修 改 成 这 样 : 

http://jjtraveltales.com/ChinaSites4.html 

在 这 种 情况 下 ,浏览 器 并 不 会 真 的 请 求 名 为 ChinaSites4.html 的 页 面 ， 而 是 还 在 当前 页 面 , 但 
加 载 新 的 幻灯 片 ， 这 正 是 我 们 想 要 的 结果 。 假 如 访客 在 历史 记录 中 回 退 ， 那 么 结果 也 是 一 样 的 。 
比如 ， 访 客 前 进 到 下 一 张 幻灯 片 ( URL 变 为 ChinaSites5.html )， 然 后 单 击 后 退 按钮 (返回 
ChinaSites4.html )， 浏 览 融 仍然 会 保持 在 当前 页 面 ， 但 会 触发 一 个 事件 ， 以 便 我 们 加 载 匹配 的 弥 
灯 片 ， 并 恢复 到 页 面 的 正确 版 本 。 

听 起 来 不 错 啊 。 可 是 ， 这 个 方案 也 存在 一 个 大 问题 。 如 果 你 想 让 会 话 历 史 如 期 工作 , 那么 就 
必须 为 每 个 URL 都 创建 一 个 对 应 的 页 面 。 对 这 个 例子 来 说 ， 你 必须 创建 ChinaSites1.html、China- 
Sites2.html、ChinaSites3.html， 等 等 。 这 是 因为 访客 可 能 会 直接 访问 这 些 页 面 ， 可 能 是 过 几 天 又 
要 通过 书签 打开 其 中 一 个 页 面 ,手工 输入 页 面 的 URL ,或 者 是 单 击 邮件 中 的 链接 打开 其 中 的 页 面 。 
大 型 互联 网 公司 ( 如 Facebook 或 Flickr ) 倒是 无 所 谓 ， 因 为 他 们 可 以 利用 少量 服务 器 端 代码 在 不 
同情 况 下 提供 相同 的 幻灯 片 。 但 对 于 小 公司 或 Web 开 发 人 员 个 人 来 说 , 这 就 意味 着 很 大 的 工作 量 。 
有 关 解 决 这 个 问题 的 方法 ,请 参见 13.3.3 节 的 附注 栏 。 

理解 了 会 话 历 史 功 能 的 工作 原理 后 ( 这 是 最 难 的 部 分 )， 实 际 使 用 它 就 容易 多 了 。 事 实 上 ， 
会 话 历 史 功能 只 涉及 两 个 方法 和 一 个 事件 ， 都 属于 history 对 象 。 

最 重要 的 方法 是 pushstate() ， 利 用 它 可 以 修改 网 页 的 URL 部 分 。 为 了 安全 起 见 ， 不 能 修改 
URL 的 其 他 部 分 。( 如 果 人 允许 修改 URL 的 其 他 部 分 ， 那 么 黑客 们 就 可 以 轻而易举 地 伪装 别人 的 网 
站 ， 比 如 让 人 在 银行 交易 表单 中 用 Gmail 登录 。) 

以 下 就 是 把 URL 的 网 页 部 分 修改 为 ChinaSites4.html 的 代码 : 

history.pushState(null, null, "ChinaSites4.html"); 

这 里 的 pushstate() 方 法 接收 三 个 参数 ， 第 三 个 最 重要 ， 它 是 出 现在 浏览 器 地 址 栏 中 的 内 容 。 

第 一 个 参数 可 以 是 任何 数据 ， 只 要 你 认为 它 适 合 表示 页 面 的 当前 状态 。 利 用 这 个 参数 ,可 以 
证 用 户 通过 浏览 器 历史 记录 恢复 到 不 同 的 页 面 状 态 。 第 二 个 参数 是 页 面 标题 ， 显 示 在 浏览 吉 标 题 
兰 。 所 有 浏览 器 目前 都 忽略 这 个 参数 。 如 果 你 不 想 设置 状态 ， 也 不 想 设 置 标题 ,那么 只 要 像 上 面 
代码 所 示 ， 在 这 两 个 参数 位 置 上 提供 null 值 即 可 。 

下 面 ， 我 们 就 来 看 看 修改 ChinaSites.html 页 面 以 匹配 当前 显示 状态 的 代码 。 这 里 使 用 幻灯 片 
的 编号 表示 页 面 状 态 。 这 个 细节 很 重要 ， 稍 后 在 处 理 onPopstate 事 件 时 你 就 会 明白 : 
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function nextSlide() { 
if (slideNumber == 5) { 
slideNumber = 1; 
} else { 
slideNumber += 1; 
} 
history.pushState(slideNumber, null, "ChinaSites" + slideNumber + ".html"); 
goToNewSlide(); 
return false; 


} 


function previousSlide() { 
if (slideNumber == 1) { 
slideNumber = 5; 


} else { 
slideNumber -= 1; 
} 
history.pushState(slideNumber, null, "ChinaSites" + slideNumber + ".html"); 
goToNewSlide(); 
return false; 
} 


goToNewSlide() 函 数 与 本 例 第 1 版 (参见 12.1.3 节 ) 中 的 一 样 ， 仍 然 用 XMLHttpRequest 对 象 异 
步 地 为 下 一 张 幻灯 片 获取 数据 。 
图 13-8 显 示 了 新 的 URL 管 理 机 制 的 运行 效果 。 


























ai 多 13-8: 访客 单 击 浏览 


7 hina ites \ > 
/ DY china Sit 区 = = 幻灯 片 时 ，URL 会 随 之 
€ GC | © localhost/Ch nChmasitess him 变化 ， 与 之 匹配 。 这 时 


China's chief tourist attractions are Well known. Less familiar are the sites discussed 二 大生 人、 
here, which range from quirky to beautiful to downright discomfiting. If you're 的 URL 既 清 晰 ， 又 符 已 
looking to explore something a little less usual, come follow us off the beaten track. ya y A— 

2 1 i 直觉 ， 因 为 它 对 应 着 每 


一 张 幻 灯 片 
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在 使 用 pushstate() 方 法 的 同时 ， 还 应 该 考虑 onPopstate 事 件 ， 它 们 可 以 说 是 “天 生 一 对 ”。 
这 么 说 是 因为 pushstate() 方 法 会 同 浏 览 器 的 历史 记录 中 存 和 一 个 新 状态 , 而 onPopstate 事 件 则 意 
味 着 用 户 返 回 了 某 个 状态 ， 这 也 就 为 处 理 状态 变化 提供 了 机 会 。 

说 了 半天 , 我 们 还 是 举 个 例子 。 假 设 访客 会 看 完 所 有 幻灯 片 ， 随 着 他 的 点 击 ， 地 址 栏 的 URL 
会 从 ChinaSites.html 变 成 ChinaSites1.html 、ChinaSites2.html、ChinaSites3.html*…*……: 即使 页 面 并 没 
有 真 的 改变 ， 但 这 些 URL 也 会 保存 到 浏览 器 的 历史 记录 中 。 如 果 用 户 返回 上 一 张 幻灯 片 〈 比如， 
从 ChinaSites3.html 返 回 ChinaSites2.html )， 就 会 触发 onPopState 事 件 。 而 这 个 事件 的 事件 对 象 中 包 
含 着 原来 通过 pushstate() 方 法 保存 的 状态 信息 。 你 的 工作 就 是 根据 这 些 信息 ， 恢 复 到 网 页 的 适 
当 版 本 。 对 于 眼下 的 例子 来 说 ， 也 就 是 加 载 正 确 的 幻灯 片 : 
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window.onpopstate = function(e) { 
if (e.state != null) { 
// 这 个 状态 的 幻灯 片 编 号 是 多 少 ? 
// (当然 也 可 以 从 URL 中 取得 这 个 编号 值 
// 但 使 用 location.href 属 性 会 比较 麻烦 ) 
slideNumber = e.state; 


// 从 Web 服 务 器 请 求 相 应 的 幻灯 片 
goToNewSlide(); 
} 
}; 


以 上 代码 首先 检测 是 否 存 在 state 对 象 ， 如 果 存 在 再 继续 下 面 的 工作 。 之 所 以 这 样 做 ， 是 因 
为 有 些 浏览 需 〈 包 括 Chrome ) 会 在 初次 加 载 页 面 时 就 触发 onPopstate 事 件 ， 即 便当 时 并 未 调用 
pushstate() 方 法 。 












































注意 ， history 对 象 中 还 有 一 个 方法 ， 但 用 得 不 多 ， 那 就 是 TeplaceState()。 可 以 使 用 Teplace- 
State() 修 改 与 当前 页 面相 关 的 状态 信息 ， 且 不 会 向 历史 记录 添加 任何 记录 。 


为 达到 URL 的 要 求 而 创建 额外 的 页 面 
会 话 历史 遵循 最 初 的 Web 哲 学 : 每 一 段 内 容 都 由 一 个 唯一 且 持 久 的 URL 标 识 。 这 就 意味 着 
每 个 URL 都 必须 让 访客 找到 他 原来 看 到 过 的 内 容 ， 不 容易 啊 。 比 如 ， 要 是 有 人 请 求 了 
ChinaSites3.html， 你 就 得 从 ChinaSites.html 中 取得 公共 内 容 ， 然 后 再 从 ChinaSites3_ slide.html 中 
取得 幻灯 片 的 内 容 ， 把 它们 显示 到 一 块 。 
如 果 你 是 经 验 丰 富 的 程序 员 ， 那 可 以 编写 一 段 服务 器 端 代码 ， 解 释 Web 请 求 ， 动态 完成 这 
一 组 合 过 程 。 但 如 果 你 没有 那么 多 经 验 ， 则 要 选择 其 他 手段 。 
最 简单 的 办 法 就 是 给 每 个 URL 创 建 一 个 网 页 文件 。 换 句 话说 , 必须 逐个 创建 ChinaSites1.html、 
ChinaSites2.html、ChinaSites3.html， 等 等 。 当 然 ， 没 有 必要 把 同一 个 幻灯 片 的 内 容 放 在 两 个 文件 
里 (比如 在 ChinaSites3.html 和 ChinaSites3_slide.html 中 保存 相同 的 幻灯 片 )， 因 为 这 些 样 维护 起 
来 太 麻 烦 。 好 在 有 两 个 简单 的 办 法 可 以 帮 上 忙 。 
口 服务 器 端 包含 。 如 果 你 的 Web 服 务 器 支持 服务 器 端 包含 技术 (大 多 数 都 支持 )， 可 以 使 
用 以 下 指令 : 
<!--#include file="footer.htm]l" --> 
虽然 这 看 起 来 像 条 注释 , 但 这 个 指令 是 在 告诉 Web 服 务 器 打开 指定 的 文件 ， 并 把 其 内 容 
插入 它 所 在 的 位 置 。 这 样 ， 就 可 以 把 公共 内 容 和 幻灯 片 组 合 在 一 个 特定 的 页 面 中 。 
事实 上 ， 对 应 于 每 张 幻灯 片 的 文件 ( ChinaSites1.html、ChinaSites2.html 等 ) 都 仅 需 几 
行 这 样 的 标记 ， 就 可 以 创建 出 一 个 页 面容 器 来 。 

口 使 用 网 页 设计 工具 中 的 模板 。 有 些 网 页 设计 工具 , 比如 Adobe Dreamweaver, 支持 Web 模 
板 功能 ， 基于 模板 可 以 创建 任意 多 个 页 面 。 只 要 创建 出 包含 公共 内 容 和 样式 的 模板 ,就 
可 以 通过 重用 它 来 迅速 简单 地 创建 出 针对 所 有 幻灯 片 的 页 面 。 
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13.3.4 浏览 器 对 会 话 历 史 的 支持 情况 


浏览 器 对 会 话 历史 功能 的 支持 和 对 Web Worker 的 支持 情况 差不多 , IE10 之 前 的 版 本 基本 不 支 
持 (参见 表 13-2 )。 


表 13-2 ”浏览 器 对 会 话 历 史 的 支持 情况 
IE Firefox Chrome Safari Opera Safari iOS Android 
最 低 版 本 10 4 8 § 11:s 5 4.2 


对 于 不 支持 会 话 历史 的 浏览 器 ， 有 两 种 处 理 方式 。 如 果 你 置之不理 , 那 就 不 会 出 现 那些 符合 
直觉 的 URL。 如 果 用 本 查看 前 面 的 例子 ， 结 果 就 是 这 样 。 无 论 你 加 载 的 是 哪个 幻灯 片 ，URL 始 终 
都 是 ChinaSites.html。Flickr 在 显示 自己 的 照片 时 也 采用 类 似 手段 (请 用 旧版 下 查看 这 个 链接 : 
http://tinyurl.com/6hnvanw )。 

另外 , 也 可 以 在 浏览 器 不 支持 会 话 历史 时 ,触发 页 面 刷新 来 加 载 新 内 容 。 如 果 提 供 容 易 识 别 
的 、 有 意义 的 URL 比 动态 加 载 内 容 还 重要 ， 这样 就 做 是 合情合理 的 但是， 这 种 方案 也 需要 更 多 
工作 来 实现 。 

有 一 种 简单 的 方法 ， 就 是 增强 导航 逻辑 ， 以 便 可 以 在 必要 的 时 候 重 定 向 到 新 页 面 。 在 
ChinaSites.html 页 面 中 ， 这 包括 增强 goToNextSlide() 函 数 ， 代 人 码 如 下 : 


function goToNewSlide() { 
if (window.history) { 
// 浏览 器 支持 会 话 历史 
if (req != null) { 
req.open("GET", "ChinaSites" + slideNumber + "_ slide" + ".html", true); 
req.onreadystatechange = newSlideReceived; 
req.send(); 

































































else { 
// 有 一 个 问题 。 和 忽略 它 
} 


ee 史 ， 所 以 重 定向 到 新 页 面 
window.location = "ChinaSites" + slideNumber + ".html" 
} 
这 段 代码 用 window.history 属 性 来 检查 是 否 支持 会 话 历史 。 如 果 支 持 ， 就 下 载 一 小 段 所 需 的 
幻灯 片 数据 并 将 其 加 载 到 已 存在 的 页 面 中 ; 如 果 不 支 持 , 就 放弃 这 种 优雅 的 方案 , 改 用 保守 的 重 
定向 到 新 页 面 方式 。 
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附录 A CSS 基础 
附录 B JavaScript : 页 面 的 大 脑 


附 录 





附录 A 


CSS 基 础 





二 和 个 令 张 地 说 , 没有 CSS (也 就 是 “ 层 和 样式 表 ”) 标准 ， 就 没有 现代 的 Web 设 计 。 即 便 

= 气 , 是 格式 极为 丰富 、 构 图 极为 复杂 的 网 页 ， 也 可 以 通过 CSS 把 格式 化 工作 转移 到 一 个 外 
部 文件 一 一 样式 表 里 。 这 样 一 来 ， 网 页 标记 就 可 以 非常 清 严 、 清 晰 、 易 读 。 

要 想 最 大 限度 地 发 挥 HIML5 ( 以 及 本 书 ) 的 功用 ， 必 须 得 熟悉 CSS 标 准 。 如 果 你 本 来 就 是 
CSS 专 家 ， 这 个 附录 可 以 不 看 ， 只 关注 本 书 其 他 内 容 即 可 ; 另外 要 特别 注意 第 6 章 和 第 7 章 ， 其 中 
介绍 了 CSS3 新 增 的 许多 功能 。 但 如 果 你 的 CSS 技 术 没有 那么 好 , 那 本 附录 可 以 帮 你 补充 一 些 基础 
知识 ， 以 便 理解 本 书 其 他 内 容 。 











注意 本 附录 只 是 概要 地 介绍 了 CSS， 并 没有 面面俱到 。 如 果 看 完 本 附录 ， 你 还 觉得 有 些 问 题 
没 搞 明白 ,建议 找 一 本 专门 讲 CSS 的 书 , 比如 David Sawyer McFarland 的 CSS3: The Missing 
Manual, 


A.1 在 网 页 中 添加 样式 


有 三 种 在 网 页 中 使 用 样式 的 方式 。 

第 一 种 是 直接 把 样式 信息 伦 入 到 元 素 里 ， 这 就 要 用 到 style 属 性 。 下 面 这 个 例子 展示 了 如 何 
修改 标题 文本 的 颜色 : 

<h1 style="color: green">Inline Styles are Sloppy Styles</h1> 

这 种 方法 非常 方便 ,但 会 令 标 记 杂 乱 无 章 ， 要 一 个 一 个 地 在 每 一 行 添 加 样式 。 

第 二 种 是 把 全 部 样式 嵌入 到 <style> 元 素 里 ， 而 这 个 <style> 元 素 要 放 在 页 面 的 <head> 部 分 : 


<head> 
<title>Embedded Style Sheet Test</title> 
<style> 














</style> 
</head> 


这 样 写 代码 能 够 把 样式 与 标记 分 开 , 但 最 终 它们 还 是 在 一 个 文件 里 。 这 种 方式 适合 一 次 性 的 
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样式 (也 就 是 不 想 在 其 他 页 面 中 重用 的 样式 )， 也 适合 简单 的 测试 和 示例 ， 就 像 本 书 中 的 示例 页 
面 一 样 。 但 是 , 对 于 真正 的 专业 站 点 而 言 , 这 种 做 法 不 值得 提倡 , 因为 页 面 因 此 会 变 得 腾 肿 不 堪 。 

第 三 种 方式 是 使 用 <link> 元 素 在 <head> 部 分 链接 外 部 样式 表 文 件 。 下 面 这 个 例子 告诉 浏览 咒 
应 用 名 为 SampleStyles.css 的 外 部 样式 表 中 的 样式 : 


<head> 

<title>External Style Sheet Test</title> 

<link rel="stylesheet" href="SampleStyles.css"> 
</head> 


这 种 方式 最 常用 ， 效 果 也 最 好 。 而 且 ， 通 过 这 种 方式 还 能 在 其 他 页 面 间 重 用 样式 。 如 果 你 
愿意 ， 还 可 以 把 样式 分 割 到 多 个 样式 表 ， 然 后 在 任意 HTML 页面 中 链接 任意 多 个 你 需要 的 那些 
样式 表 。 




















注意 现代 Web 开 发 建立 在 一 个 简单 的 原理 基础 上 。HTML 标 记 用 于 把 页 面 结构 化 为 人 逻辑 区 块 
( 段落、 标题 、 列 表 、 图 片 、 链 接 等 )， 而 CSS 样 式 表 用 于 格式 化 (通过 指定 字体 、 颜 色 、 
边框 、 背 景 和 布局 )。 遵 守 这 个 规则 ， 网 页 就 容易 编辑 。 如 果 要 修改 整个 网 页 的 格式 和 布 
局 ， 只 要 修改 它 所 链接 的 样式 表 即 可 。( 要 了 解 样 式 表 真 正 的 魔力 ， 建 议 看 看 “CSS 禅 意 
花园 ”， 地 址 为 www.csszengarden.comj; 其 中 ， 相 同 的 网 站 通过 不 同 的 样式 表 ， 呈 现 出 了 
200 多 种 不 同 的 面貌 。) 


A.2 样式 表 解 析 


一 个 样式 表 就 是 一 个 文本 文件 ， 在 Web 服 务 需 上 通常 与 HTML 页 面 放 在 一 起 。 样 式 表 中 包含 
若干 样式 规则 ， 规 则 的 先后 顺序 不 重要 。 

每 条 样式 规则 会 为 一 或 多 个 HTML 元 素 指定 一 或 多 个 格式 化 信息 。 下面 是 简单 的 样式 规则 的 
结构 : 


selector { 
property: value; 
property: value; 








以 下 是 样式 规则 各 个 部 分 的 说 明 。 

D selector ( 选择 符 ): 表示 要 格式 化 什么 内 容 。 浏 览 咒 会 在 整个 页 面 中 查找 选择 符 想 要 匹 
配 的 元 素 。 编 写 选 择 符 的 方式 也 不 止 一 种 ， 但 最 简单 的 就 是 直接 给 出 你 想 要 为 其 应 用 样 
式 的 元 素 名 〈 如 下 所 示 )。 例 如 ， 可 以 编写 一 个 选择 符 ， 选 出 页 面 中 的 所 有 一 级 标题 。 

口 property (属性 ): 表示 要 应 用 什么 样式 。 属 性 就 是 颜色 、 字 体 、 对 齐 方式 ， 等 等 ,一 条 

样式 规则 里 可 以 设置 任意 多 个 属性 一 一 这 个 例子 里 是 两 个 属性 。 

口 value ( 值 ): 表示 给 样式 设置 什么 样 的 值 。 例 如 ,如果 属性 是 颜色 ,那么 值 可 以 是 浅 蓝 色 
或 淡 绿 色 。 
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好 了 ， 下 面 看 一 个 真正 的 样式 规则 : 


h1 
text-align: center; 
color: green; 


} 

把 这 条 规则 复制 粘贴 到 样式 表 里 〈 比如 ， 保 存在 SampleStyles.css 中 )， 然 后 找 一 个 简单 的 网 
页 ( 至少 要 包含 一 个 <h1> 元 素 )， 添 加 一 个 <link> 元 素 引 用 该 样式 表 。 最 后 ， 在 浏览 器 中 打开 这 
个 网 页 ， 你 就 会 发 现 <h1> 元 素 不 再 是 其 默认 的 格式 ， 而 是 会 变 成 绿色 并 居中 。 














A.2.1 CSS 属 性 


前 面 的 例子 介绍 了 两 个 格式 化 属性 : text-align (设置 文本 在 水 平方 向 上 如 何 对 齐 ) 和 color 
(设置 文本 的 颜色 )。 

除 此 之 外 ， 还 有 很 多 很 多 可 以 使 用 的 格式 化 属性 。 表 A-1 列 出 了 其 中 一 些 最 常用 的 。 事 实 
上 ， 这 个 表 中 列 出 了 本 书 示例 中 出 现 过 的 几乎 所 有 样式 属性 〈 不 包括 第 6 章 和 第 7 章 中 介绍 的 更 
新 的 CSS3 属 性 )。 








山中 














表 A-1 按 类 查看 的 常用 样式 属性 
属 性 


color 





车 
[BR 





background-color 





margin 

padding 

margin-left、 margin-right、 margin-top、 margin-bottom 
padding-left、 padding-right、 padding-top、padding-bottom 
border-width 

border-style 








border-color 
border (一 次 性 设置 宽度 、 样 式 和 颜色 ) 
text-align 











text-indent 
word-spacin 
文本 对 齐 ee 
etter-spacing 
line-height 
white-space 





font-family 
font-size 
font-weight 
字体 font-style 
font-variant 
text-decoration 


@font-face (关于 使 用 自 定 义 字体 ， 请 参考 6.4 节 ) 
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属 性 
width 
本 height 
position 
布局 left、 right 


float、 clear 





background-image 
图 片 background-repeat 
background-position 


提示 如 果 你 手边 没有 其 他 样式 表 参 考 书 ， 可 以 访问 http://www.htmldog.com/reference/ 
cssproperties， 里 面 有 表 里 列 出 的 〔 以 及 更 多 的 ) 属性 。 你 可 以 找到 每 个 属性 的 信息 ， 包 
括 简介 和 允许 哪些 值 。 


A.2.2 ”使 用 类 格式 化 正确 的 元 素 


前 面 的 样式 规则 格式 化 的 是 所 有 文档 中 的 ch1> 标 题 。 但 在 比较 复杂 的 文档 中 ， 则 需要 指定 具 
体 的 元 素 ， 为 它们 应 用 不 同 的 样式 。 

为 此 ,需要 使 用 class 属 性 为 这 些 元 素 起 个 名 字 。 下 面 是 一 个 设置 类 名 为 ArticleTitle 的 例子 : 

<h1 class="ArticleTitle">HIMLS is Winning</h1> 

好 了 , 现在 可 以 只 为 这 个 标题 写 一 条 样式 规则 了 。 关 键 在 于 选择 符 要 以 一 个 句点 开头 ,然后 
才 是 类 名 ， 像 这 样 : 

.ArticleTitle { 

font-family: Garamond, serif; 


font-size: 40px; 
} 
这 样 ， 表 示 文 章 标 题 的 <h1> 元 素 就 放大 到 了 40 像 素 高 。 
可 以 给 任意 多 个 元 素 指定 相同 的 类 属性 。 事 实 上 ， 这 正 是 发 明 类 属性 的 用 意 所 在 。 几 乎 所 有 
样式 表 里 都 可 以 看 到 类 选择 符 规则 , 这 些 类 选择 符 把 网 页 标记 有 效 地 分 成 了 可 以 承载 样式 的 单位 。 
最 后 ， 有 必要 提 一 下 : 可 以 组 合 使 用 元 素 类 型 和 类 名 。 比 如 : 
h1.ArticleTitle { 


font-size: 40px; 


; 

这 个 选择 符 匹配 了 所 有 类 为 ArticleTitle 的 <h1> 元 素 。 有 时 候 ， 这 样 写 只 是 为 了 清晰 而 已 。 
比如 , 你 可 能 想 用 这 种 规则 说 明 只 为 <h1> 元 素 添加 ArticleTitle 类 ,而 其 他 元 素 都 不 会 有 这 个 类 。 
但 大 多 数 情 况 下 ，Web 设 计 人 员 只 会 给 出 一 个 类 名 ， 不 会 限定 任何 元 素 。 
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注意 不 同 的 选择 符 可 以 层 司 。 如 果 有 多 个 选择 符 都 选择 了 同一 个 元 素 ， 那 么 这 些 选 择 符 背后 
的 样式 都 会 起 作用 ， 但 首先 会 应 用 最 通用 的 样式 。 比 如 ， 有 一 条 规则 适用 于 所 有 标题 ， 
另 一 条 规则 适应 于 类 名 为 ArticleTitle 的 元 素 , 那么 会 先 应 用 针对 所 有 标题 的 样式 ， 然 后 
应 用 类 规则 。 结 果 ， 就 是 类 规则 会 覆盖 应 用 给 所 有 标题 的 规则 。 如 果 两 条 规则 的 针对 性 
一 样 ， 那 么 会 应 用 出 现在 样式 表 后 面 的 那个 规则 的 样式 。 


A.2.3 样式 表 注 释 


在 复杂 的 样式 表 中 ， 有 时 候 需要 写 一 些 说 明 来 提醒 自己 〈 或 其 他 人 ) 为 什么 要 写 某 条 规则 ， 
以 及 该 规则 的 目的 是 什么 。 与 HTML 一 样 , 在 CSS 中 也 可 以 写 注 释 , 浏览 器 同样 会 忽略 这 些 注释 。 
不 过 ，CSS 注 释 与 HTML 注 释 不 一 样 。CSS 注 释 以 /#* 字 符 开 头 ， 以 % 字 符 结尾 。 下 面 这 条 注释 虽然 
没有 多 大 意义 ， 但 它 示 范 了 注释 的 语法 : 

/* 这 是 页 面 中 文章 的 标题 */ 

.ArticleTitle { 


font-size: 40px; 


} 


A.3 高 级 一 点 的 样式 表 

稍 后 我 们 会 介绍 一 个 实用 的 样式 表 。 不 过 ， 首 先 还 是 来 看 几 个 编写 样式 时 常用 的 高 级 技巧 。 
A.3.1 用 <div> 元 素 为 网 页 

在 编写 样式 表 时 ， 我 们 经 常 要 用 <div> 元 素来 包装 内 容 : 


<div> 
<p>Here are two paragraphs of content.</p> 
<p>In a div container.</p> 

</div> 


就 其 本 身 而 言 ，<div> 什 么 也 不 做 。 但 是 有 了 它 ， 就 可 以 基于 类 来 应 用 一 些 样式 。 下 面 是 一 
些 可 能 的 做 法 。 
口 继承 的 值 。 有 些 CSS 属 性 是 可 以 继承 的 , 也 就 是 在 一 个 元 素 上 设置 的 值 可 以 自动 应 用 给 该 
元 素 内 部 的 所 有 元 素 。 比 如 字体 属性 ， 在 <div> 元 素 上 设置 了 该 属性 后 ， 这 个 元 素 内 部 的 
所 有 属性 都 会 应 用 同样 的 字体 样式 ( 除非 你 在 具体 的 元 素 上 徐 盖 这 些 规则 )。 
口 盒 模型 。 一 个 cdiv> 元 素 就 是 一 个 自然 的 容器 。 可 以 给 它 添加 边框 、 空 距 和 不 同 的 背景 颜 
色 (或 背景 图 片 )， 从 而 让 它 在 页 面 中 更 加 显眼 。 
口 分 栏 。 专 业 的 网 站 通常 会 把 内 容 分 成 两 栏 或 三 栏 。 实 现 分 栏 的 一 种 方式 就 是 把 每 一 个 栏 
的 内 容 包装 在 一 个 <div> 元 素 中 ， 然 后 再 使 用 CSS 定 位 属性 将 它们 放 到 适当 的 位 置 上 。 
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提示 “既然 HTMLS 已 经 引入 了 一 套 新 的 语义 元 素 , 《div> 元 素 的 地 位 就 不 那么 重要 了 。 如 果 可 以 
把 <div> 元 素 替 换 成 其 他 更 有 语义 的 元 素 ( 如 kheadery> 或 <figure> )， 只 管 蔡 换 好 了 。 但 在 
没有 适当 元 素 的 情况 下 ，<div> 元 素 仍然 是 个 不 错 的 选择 。 第 2 章 详细 介绍 过 HTML5 中 的 
所 有 语义 元 素 。 


<div> 元 素 还 有 一 个 小 兄弟 ， 叫 做 <span>。 与 div> 类 似 ，<span> 元 素 也 没有 内 置 样式 。 但 不 同 
的 是 ，<div> 是 块 级 元 素 ， 用 于 分 隔 段 落 或 整 块 内 容 ;， 而 <span> 则 是 行内 元 素 ， 用 于 在 块 级 元 素 中 
包装 少量 内 容 。 比 如 ， 可 以 用 <span> 元 素 在 段落 中 包装 几 个 单词 ， 然 后 给 它们 应 用 特殊 的 样式 。 








注意 ”CSS 鼓励 优秀 设计 。 怎 么 鼓励 的 ? 如 果 你 想 有 效 地 使 用 CSS， 必 须 事 先 规 划 好 网 页 结构 。 
这 种 对 CSS 的 需求 就 会 鼓励 人 们 认真 思考 如 何 组 织 自己 的 内 容 ， 即 便 是 临时 的 页 面 设 计 
人 员 也 不 例外 。 


A.3.2 ”多 个 选择 符 


有 时 候 ， 你 可 能 需要 定义 一 些 样式 ， 把 它们 应 用 给 多 个 元 素 或 多 个 类 。 此 时 ， 你 可 以 在 选择 
符 之 间 加 上 逗号 。 
比如 ， 下 面 这 两 级 标题 ， 分别 有 不 同 的 字体 大 小 ,但 有 相同 的 字体 : 
hi { 
font-family: Impact, Charcoal, sans-serif; 


font-size: 40px; 


} 


h2 { 
font-family: Impact, Charcoal, sans-serif; 
font-size: 20px; 


} 
你 可 以 把 font-family 属 性 单独 放 到 一 条 规则 里 ， 把 它 应 用 给 两 级 标题 ， 比 如 : 
hi, h2 { 
font-family: Impact, Charcoal, sans-serif; 
} 
hi { 
font-size: 40px; 
} 
h2 { 
font-size: 20px; 
} 





关键 在 于 , 这 样 写 样式 不 是 优秀 设计 所 必须 的 。 通常 , 重复 设置 某 个 属性 反倒 可 以 增加 将 来 修 
改 样式 的 灵活 性 。 假 如 共享 的 属性 太 多 , 那么 很 难 做 到 修改 一 个 元 素 类 型 或 类 , 而 不 影响 其 他 元 素 。 
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A.3.3 上下文 选择 符 
上 下 文选 择 符 用 于 匹配 位 于 另 一 个 元 素 内 部 的 元 素 。 看 一 下 例子 : 


.Content h2 { 
color: #24486C; 
font-size: medium; 
} 
这 个 选择 符 先 会 查找 带 有 Content 类 的 元 素 ， 然 后 再 在 该 元 素 中 查找 <h2> 元 素 ， 找 到 之 后 为 
它们 应 用 不 同 的 文本 颜色 和 字体 大 小 。 下 面 这 段 标记 展示 了 会 应 用 该 样式 规则 的 元 素 : 


<div class="Content"> 




















<h2>Mayan Doomsday</h2> 


</div> 





在 第 一 个 例子 中 ,第 一 个 选择 符 是 一 个 类 选择 符 , 第 二 个 选择 符 ( 即 上 下 文选 择 符 ) 是 一 个 
元 素 类 型 选择 符 。 不 过 ， 你 可 以 根据 自己 的 需要 进一步 修改 ， 比 如 下 面 这 个 例子 : 

.Content .LeadIn { 

font-variant: small-caps; 

这 个 选择 符 会 查询 类 为 LeadIn 的 元 素 ， 但 它 必须 被 包含 在 类 为 Content 的 元 素 中 。 比 如 ， 它 
匹配 下 面 的 元 素 : 

«<div class="Content"> 


<p><Span class="LeadIn">Right now</span>, you're probably feeling pretty 
good. After all, life in the developed world is comfortable ...</p> 








</div> 


熟悉 了 上 下 文选 择 符 的 用 法 之 后 ， 你 会 发 现 这 是 一 种 非常 直接 的 方式 ， 也 非常 有 用 。 





A.3.4 1D 选 择 符 





类 选择 符 还 有 一 个 近亲 , 叫做 ID 选择 符 。 与 类 选择 符 相 侯 , ID 选择 符 可 以 让 你 只 为 选 定 的 元 
素 应 用 样式 。 而 且 ， 同 样 与 类 选择 符 相似 ， 使 用 卫 选 择 符 也 可 以 挑 一 个 描述 性 的 名 字 。 只 不 过 ， 
不 能 再 使 用 名 点， 而 要 使 用 井 号 (#)， 如 下 所 示 : 

#Menu { 

border-width: 2px; 
border-style: solid; 

} 

与 类 规则 相似 ， 除 非 你 在 HTML 中 指定 ID， 否 则 浏览 絮 不 会 应 用 相应 的 样式 。 不 过 ， 这 次 不 
是 使 用 class 属 性 ， 而 是 要 使 用 id 属 性 。 比 如 ， 以 下 这 个 <div> 元 素 就 可 以 应 用 前 面 的 #Menu 样 式 。 


<div id="Menu">...</div> 
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此 时 , 可 能 有 人 会 问 一 一 为 什么 要 用 了 选择 符 , 难道 ID 选择 符 与 类 选择 符 有 什么 区 别 吗 ? 的 
确 是 有 区 别 : 一 个 了 D 只 能 指定 给 页 面 中 的 一 个 元 素 。 以 刚才 的 标记 为 例 , 页 面 中 只 能 有 一 个 <div> 
元 素 ( 以 及 其 他 元 素 ) 可 以 带 有 Menu 这 个 ID 。 但 类 属性 则 没有 这 个 限制 ， 同 一 个 类 名 可 以 随便 应 
用 给 任意 多 个 元 素 。 

这 就 意味 着 ，ID 选 择 符 非常 适合 用 来 为 那些 一 个 页 面 中 唯一 的 、 不 会 重复 的 元 素 应 用 样式 。 
而 这 也 体现 了 使 用 ID 选 择 符 的 一 个 优势 ， 那 就 是 清晰 地 表明 某 个 元 素 特 别 重要 。 比 如 ， 页面 中 可 
能 有 一 个 ID 选择 符 叫 Menu 或 NavigationBar, 那么 设计 师 就 知道 页 面 中 只 有 一 个 菜单 或 导航 条 。 当 
然 , 并 不 是 非 要 使 用 ID 选择 符 不 可 。 有 些 Web 设 计 师 会 在 任何 情况 下 都 使 用 类 选择 符 ， 无 论 标识 
的 区 块 是 不 是 唯一 。 这 只 能 说 是 葛 下 白菜 各 有 所 爱 。 









































注意 ID 属性 在 JavaScript 中 同样 扮演 着 重要 角色 ， 它 可 以 让 开发 人 员 取 得 页 面 中 的 特殊 元 素 ， 
然后 在 代码 中 操作 该 元 素 。 本 书 中 的 示例 只 要 是 有 为 JavaScript 代 码 准 备 好 了 ID 的 ， 就 会 
使 用 有 DD 选择 符 来 应 用 样式 规则 ， 这 样 就 避免 了 同时 为 元 素 设置 ID 和 类 属性 。 否 则 ， 示 例 
中 就 会 使 用 类 选择 符 为 相应 的 元 素 应 用 样式 ， 无论 该 元 素 在 页 面 中 是 否 唯 一 。 


A.3.5 伪 类 选择 符 


目前 , 我 们 看 到 的 选择 符 都 是 很 直观 的 。 它 们 一 般 都 只 考虑 某 个 显而易见 的 特点 ， 比 如 元 素 
类 型 、 类 名 或 者 ID 属性 值 。 伪 类 选择 符 就 没有 那么 好 理解 ， 因 为 还 要 考虑 其 他 方面 。 所 谓 其 他 方 
面 ， 指 的 是 那些 标记 中 并 不 存在 ， 或 者 要 根据 用 户 操作 来 确定 的 信息 。 

CSS 过 去 很 长 时 间 只 支持 几 个 伪 类 , 其 中 又 有 大 部 分 专门 为 链接 而 设计 。 比 如 ，: link 伪 类 用 
于 为 新 的 、 未 访问 过 的 链接 应 用 样式 ，:visited 伪 类 用 于 为 访问 过 的 链接 应 用 样式 ，:hover 伪 类 
用 于 为 用 户 鼠 标 悬 停 状 态 下 的 链接 应 用 样式 ， 而 :active 伪 类 用 于 为 鼠标 点 击 且 尚未 抬 起 状态 下 
的 链接 应 用 样式 。 你 也 看 到 了 ， 伪 类 始终 以 一 个 冒号 (:) 开头 。 

下 面 的 样式 规则 使 用 伪 类 创建 故意 让 人 迷惑 的 页 面 , 也 就 是 说 访问 过 的 链接 是 蓝 色 , 而 未 访 
问 过 的 链接 是 红色 : 

a:link { 


color: red; 


} 
a:visited { 
color: blue; 


} 
伪 类 也 可 以 与 类 名 一 起 用 : 


.BackwardLink:1link { 
color: red; 

} 

.BackwardLink:visited { 
color: blue; 


} 
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那么 ， 为 了 应 用 这 个 新 样式 的 链接 元 素 可 能 如 下 所 示 : 

<a class="BackwardLink" href="...">...</a> 

伪 类 并 不 是 只 能 用 来 为 链接 添加 样式 。 比 如 ,还 可 以 用 :hover 伪 类 来 创建 动画 效果 和 好 玩 的 
按钮 。 当 然 ， 这 要 用 到 6.3 节 介绍 的 CSS 的 过 渡 功 能 。 





注意 CSS3 还 增加 很 多 更 高 级 的 伪 类 ， 涉 及 很 多 其 他 细节 ， 比 如 元 素 相对 于 其 他 元 素 的 位 置 ， 
或 者 表单 中 输入 控制 的 状态 。 本 书 不 会 介绍 这 些 伪 类 ， 但 有 兴趣 的 话 ， 建 议 读 者 看 看 
Smashing Magazine 上 的 这 篇 文章 : http://tinyurl.com/pc-css3。 


A.3.6 属性 选择 符 
属性 选择 符 是 CSS3 提 供 的 功能 ， 可 以 选择 属性 为 特定 值 的 特定 类 型 的 元 素 。 以 下 面 这 个 样 
式 规则 为 例 ， 它 只 适用 于 文本 模式 : 


input[type="text"] { 
background-color:silver; 

















首先 ， 这 个 选择 符 会 取得 所 有 <input> 元 素 。 然 后 ， 它 会 进一步 筛选 出 type 属 性 等 于 "text" 
的 那些 <input> 元 素 ， 只 对 这 些 元 素 应 用 样式 。 对 于 下 面 的 标记 而 言 ， 只 有 第 一 个 <input> 元 素 会 
人 带 有 银色 背景 ， 第 二 个 元 素 则 不 会 : 

<label for="name">Name:</label><input id="name" type="text"><br> 

<input type="submit" value="OK"> 

严格 来 讲 ， 不 必 在 第 一 个 cinput> 元 素 中 指定 type="text"， 因 为 这 是 它 的 默认 值 。 不 指定 的 
话 ， 前 面 的 属性 选择 符 照 样 有 效 ， 因 为 它 只 关注 属性 的 当前 值 ， 而 不 关注 这 个 值 是 不 是 在 标记 中 
指定 的 。 

类 似 地 ， 也 可 以 另外 创建 一 条 规则 ， 只 应 用 给 文本 框 的 标题 ， 忽 略 其 他 标签 : 


label[for="name"] { 
width: 200px; 


} 

















注意 ”对 属性 选择 符 ， 也 可 以 发 挥 一 点 想象 力 。 比 如 ， 可 以 同时 匹配 几 个 属性 值 ， 或 只 匹配 某 
个 属性 值 的 一 部 分 。 这 些 技术 非常 有 创意 ， 但 却 会 给 普通 的 样式 表 平 添 很 多 复杂 性 。 要 
了 解 CSS3 标 准 中 的 选择 符 ， 请 参考 http://tinyurl.com/s-css3。 


A.4 ”从头 写 一 个 样式 表 


第 2 章 在 学 习 HTML5 请 义 元 素 时 ,我 们 使 用 了 一 外 观 漂亮 的 示例 页 面 ,文件 名 是 
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ApocalypsePage_Originalhtml ( 参见 图 A-l )。 


ApocalypsePage Original.css: 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Apocalypse Now</title> 
<link rel="stylesheet" href="ApocalypsePage Original.css"> 
</head> 


这 个 页 面 链接 到 了 一 个 外 部 样式 表 文 件 ， 叫 


这 个 样式 表 比 较 简 单 明 了 ， 总 共 也 就 50 行 左右 。 本 节 我 们 就 来 分 析 这 个 样式 表 中 的 规则 。 








€ 








) DD Apocalypse Now We 


[= | © lg) 








C © fie///C/HTML5/Chapter%2002/ApocalypsePage_Original.html 


How the World Could End 


RIGHT NOW, you're probably feeling pretty good. After all, life in the developed world is 
comfortable—probably more comfortable than it's been for the average human being throughout 
all of recorded history. 


But don't get too smug. There's still plenty of horrific ways it could all fall apart. In this article, 
you'll learmn about a few of our favorites. 


Mayan Doomsday 

Skeptics suggest that the Mayan calendar simply rolls to a new 5,126-year era after 2012, and 
doesn't actually predict a life-ending apocalypse. But given that the long-dead Mayans were wrong 
about virtually everything else, why should we trust them on this? 


Robot Takeover 

Not quite as frightening as a Vampire Takeover or Living-Dead Takeover, a robot rebellion is still 
a disquieting thought We are already outnumbered by our technological gadgets, and even Bill 
Gates fears the day his Japanese robot slave turns him over by the ankles and asks (in a suitably 
robotic voice) "Who's your daddy now?" 


Unexplained Singularity 
We don't know how the universe started, so we can't be sure it won't just end, maybe today, and 
maybe with nothing more exciting than a puff of anti-matter and a slight fizzing noise. 


Runaway Climate Change 
Dismissed by some, Al Gore's prophecy of doom may still come true. If it does, we may have to 
contend with vicious storms, widespread food shortages, and surly air conditioning repairmen. 


Global Epidemic 

Some time in the future, a lethal virus could strike. Predictions differ about the source of the 
disease, but candidates include monkeys in the African jungle, bioterrorists, birds and pigs with 
the flu, warriors from the future, an alien race, hospitals that use too many antibiotics, vampires, 
the CIA, and unwashed brussel sprouts. Whatever the source it s clearly bad news. 


These apocalyptic predictions do not reflect the views of the author. 
About Us Disclaimer Contact Us 
Copyright ® 2011 
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图 A-1: 这 个 页 面 的 样式 

表 很 简单 ， 但 它 却 体现 

的 基本 
组 织 原则 











其 他 元 素 。 可 继承 值 包括 外 边 距 、 内 边 距 、 背 景 颜色 、 字 体 和 宽度 等 : 


个 样式 表 一 开始 是 一 个 针对 <body> 元 素 的 选择 符 ，<body> 是 整个 网 页 的 根 元 素 。 这 个 元 素 
LA 默认 情况 下 ,应 用 给 cbody> 元 素 的 可 继承 值 也 会 应 用 给 文档 中 


body { 


font-family: 


max-width: 800px; 


} 


"Lucida Sans Unicode", "Lucida Grande", Geneva, sans-serif; 





附录 A Css 基础 | 377 














设置 font-family 这 个 CSS 属 性 ， 要 遵循 两 条 规则 。 首 先 ， 要 使 用 Web 安 全 字体 ， 也 就 是 那些 
已 知 的 所 有 能 上 网 的 计算 机 中 都 会 安装 的 字体 (参见 http://tinyurl.com/ws-fonts )。 其 次 ， 列 出 字 
体 时 ， 要 按照 先 特殊 后 一 般 的 原则 ， 先 给 出 你 想 要 的 某 种 字体 ， 然 后 是 保险 一 些 的 后 备 字 体 ， 最 
后 以 serif 或 sans-serif ( 这 两 种 所 有 浏览 器 都 能 理解 的 ) 字体 结尾 。 如 果 你 想 特 别 想 标 新 立 异 ， 
希望 用 户 从 你 的 Web 服 务 器 上 下 载 字体 ， 可 以 参考 6.4 节 有 关 CSS3 网 路 字体 的 内 容 。 

针对 页 面 主体 的 样式 规则 设置 了 最 大 宽度 , 不 超过 800 像 素 。 这 条 规则 可 以 避免 文本 行 过 长 ， 
无 法 阅读 的 问题 ,特别 当 浏 览 器 窗口 非常 宽 的 情况 下 。 处 理 文本 行 过 宽 的 问题 还 有 其 他 方法 ， 比 
如 把 文本 分 成 几 栏 (参见 6.4.6 节 ), 使 用 CSS 媒 体 查 询 ( 参见 7.2 节 ), 或 者 在 布局 上 增加 一 个 边栏 
以 利用 多 余 空间 。 不 过 ， 设 置 为 固定 的 800 像 素 宽度 还 是 比较 常用 的 手段 ， 尽 管 不 是 很 刺激 。 

接 下 来 ,在 样式 表 中 写 一 个 针对 类 的 规则 ， 用 于 为 页 面 顶 部 的 标题 区 添加 样式 : 


.Header { 
background-color: #7695FE; 
border: thin #336699 solid; 
padding: 10px; 
margin: 10px; 
text-align: center; 


























注意 ”在 这 个 示例 中 , 页 面 头 部 用 一 个 类 名 为 Header 的 <div> 元 素 。 而 第 2 章 则 探讨 了 为 什么 最 好 
将 它 替换 成 HTMLS 的 <header> 元 素 。 








je 


这 条 规则 里 使 用 了 很 多 属性 。 其 中 ，background-color 属 性 可 以 接受 任何 CSS 颜 色 值 ， 比 如 
颜色 名 ( 可 用 颜色 相对 少 一 些 )、HTML 颜 色 代 码 ( 如 上 所 示 )， 或 者 rgb() 函 数 ( 可 以 指定 红 、 
绿 、 蓝 分 量 的 多 少 )。 本 书 中 的 示例 用 到 了 所 有 这 三 种 手段 ， 在 简单 的 例子 中 用 的 是 颜色 值 ， 在 
接近 实际 的 例子 中 用 的 是 颜色 代码 和 rgb() 函 数 。 

顺便 提 一 下 ， 所 有 HTML 颜 色 代 码 都 可 以 用 rgb() 函数 来 表示 ， 反 之 亦 然 。 比 如 ， 前 面 的 颜 
色 代 码 如 果 用 rgb() 函 数 写 ， 就 是 这 样 : 


background-color: rgb(118,149,254); 









































提示 要 知道 自己 想 要 的 颜色 的 RGB 值 ， 可 以 找 个 在 线 颜 色 拾 取 器 ， 或 者 使 用 自己 常用 的 平面 
或 插画 绘图 软件 。 








头 部 规则 也 为 四 周 应 用 了 一 条 细 边 框 。 这 里 使 用 的 是 多 合 一 的 border 属 性 , 分 别 指定 了 边框 
粗细 边框 颜色 和 边框 样式 (边框 样式 可 以 设置 为 solid、 dashed、 dotted、 double、 groove、 ridge、 
inset 、outset 等 )， 一 个 属性 搞定 。 

设置 了 背景 颜色 和 边框 之 后 ， 接 着 又 设置 了 10 像 素 的 内 边 距 ( 即 边框 与 内 容 之 间 的 距离 )， 
10 像 素 的 外 边 距 〈 即 边 框 与 周围 元 素 之 间 的 距离 )。 最 后 ， 将 头 部 中 的 文本 居中 。 
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接 下 来 ,再 写 一 个 上 下 文选 择 符 ， 控 制 头 部 中 元 素 的 格式 。 首 先是 头 部 中 的 <h1> 元 素 : 
.Header h1 { 

margin: Opx; 

color: white; 

font-size: xx-large; 


} 


提示 “设置 字体 大 小 时 ， 可 以 使 用 关键 字 ( 如 这 里 的 xx-large 等 )。 另 外 ， 如 果 你 希望 对 字体 控 
制 得 更 精确 ， 可 以 使 用 像素 或 em 单位 。 


再 写 两 条 类 规则 ， 分 别针 对 类 名 Teaser 和 Byline， 它 们 也 在 <header> 里 : 


.Header .Teaser { 
margin: Opx; 
font-weight: bold; 

} 


.Header .Byline { 
font-style: italic; 
font-size: small; 
margin: Opx; 


这 两 条 规则 能 起 作用 ， 是 因为 头 部 包含 两 个 cspan> 元 素 。 一 个 <span> 元 素 有 类 名 Teaser ， 包 
含 副 标题 ， 男 一 个 <span> 元 素 的 类 名 是 Byline， 包 含 作者 信息 ， 下 面 是 相关 代码 : 
<div class="Header"> 
<h1>How the World Could End</h1> 
<p class="Teaser">Scenarios that spell the end of life as we knowit</p> 


<p class="Byline">by Ray N. Carnation</p> 
</div> 


下 面 为 类 名 为 Content 的 <div> 写 一 条 规则 ， 这 个 元 素 中 包含 着 页 面 的 主要 内 容 。 规 则 中 的 样 
式 涉 及 字体 、 内 边 距 、 行 高 ， 等 等 : 


.Content { 

font-size: medium; 

font-family: Cambria, Cochin, Georgia, "Times New Roman", Times, serif; 
padding-top: 20px; 

padding-right: 50px; 

padding-bottom: 5px; 

padding-left: 50px; 

line-height: 120%; 


} 

与 头 部 规则 为 四 边 设置 相同 的 内 边 距 不 同 ， 这 条 规则 为 页 面 内 容 的 各 边 设置 了 不 同 的 内 边 
距 。 具体 来 说 ， 上 内 边 距 加 大 了 ,而 左 、 右 内 边 距 最 大 。 为 各 边 设置 不 同 边 距 的 一 种 做 法 就 像 这 
里 这 样 ， 使 用 padding-top、padding-right 等 属性 。 男 一 种 做 法 是 给 padding 属 性 提供 一 串 特 定 顺 
序 (上 、 右 、 下 、 左 ) 的 值 。 下面 这 一 条 属性 就 可 以 取代 上 面 的 三 条 : 
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padding: 20px 50px 5px 50px; 
一 般 来 说 , 这 种 方式 可 以 为 元 素 各 边 设 置 内 边 距 , 而 针对 各 边 的 扩展 属性 则 可 以 只 设置 某 一 
边 的 内 边 距 。 当 然 ， 哪 种 方式 都 可 以 ,要 看 你 自己 的 喜好 。 
最 后 一 个 line-height 属 性 设置 的 是 相 邻 两 个 文本 行 之 间 的 距离 。 这 里 的 120% 给 出 了 额外 的 
空间 ， 让 人 阅读 起 来 更 容易 。 
接着 要 写 三 个 上 下 文选 择 符 ， 分 别 为 内 容 中 的 三 个 元 素 应 用 样式 。 第 一 条 规则 为 类 名 为 
LeadIn 的 <span> 元 素 应 用 样式 ， 主 要 是 把 其 中 的 前 两 个 单词 加 大 ， 变 成 粗 体 和 小 型 大 写字 母 : 
.Content .LeadIn { 
font-weight: bold; 
font-size: large; 


font-variant: small-caps; 


. 
后 面 两 条 规则 修改 ch2> 和 <p> 元 素 : 


.Content h2 { 
color: #24486C; 
margin-bottom: 2px; 
font-size: medium; 


} 


.Content p { 
margin-top: Opx; 


















































看 到 了 吧 , 虽然 样式 表 越 来 越 长 , 但 它 却 没有 变 复 杂 。 所 有 样式 规则 都 在 简单 重复 基本 的 东 
西 (类 选择 符 和 上 下 文选 择 符 )， 而 这 些 基 本 的 东西 就 可 以 为 文档 的 每 个 部 分 添加 样式 。 
最 后 , 我 们 再 写 儿 条 为 页 面 末尾 的 脚 部 添加 样式 的 规则 。 都 现在 了 ,你 自己 能 看 明白 , 我 就 
不 解释 了 : 
.Footer { 
text-align: center; 


font-size: x-small; 


} 





.Footer .Disclaimer { 
font-style: italic; 


} 


.Footer p { 
margin: 3px; 


这 样 我 们 的 ApocalypsePage_Original.css 样 式 表 就 完成 了 。 如 果 你 没 跟 着 写 ， 也 可 以 到 本 书 
配套 站 点 〈http:/prosetech.comy/html5 ) 下 载 ， 然 后 在 已 有 样式 基础 上 改 一 改 ， 看 看 结果 会 怎么 
样 。 或 者 ， 再 去 看 看 本 书 第 2 章 ， 其 中 利用 HTML5 的 语义 元 素 重 写 了 这 个 页 面 ， 样 式 表 也 相应 
作 了 调整 。 
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附录 B 


JavaScript: 页 面 的 大 脑 





用 网 上 只 有 标记 。 那 时 候 ， 页 面 里 只 包含 文本 和 HTML 标 签 ， 除 此 
人 J 二 外 就 没有 什么 别 的 了 。 真正 先进 的 网 站 会 用 到 服务 器 端 脚 本 ， 即 在 服务 器 上 先 动态 
生成 HTML 标 记 ， 然 后 再 发 给 浏览 器 ; 不 过 ， 也 仅 此 而 已 。 

今天 ， 随 便 打 开 一 个 页 面 ， 都 可 能 会 看 到 大 量 JavaScript 代 码 。 这 些 JavaScript 代 码 驱动 着 网 
站 的 一 切 内 容 ， 从 重要 功能 到 给 页 面 添 加 好 看 的 装饰 。 自 动 完成 的 文本 框 、 弹 出 式 菜 单 、 幻 灯 片 
展示 、 实 时 绘图 , 以 及 在 线 电邮 系统 , 这 些 只 是 高 明 的 开发 人 员 使 用 JavaScript 所 能 实现 的 无 数 功 
能 中 的 一 小 部 分 。 实 际 上 ， 没 有 JavaScript 的 Web 是 无 法 想象 的 。 虽 然 HTML 依 旧 是 Web 的 核心 语 
言 ， 但 JavaScript 如 今 伍 然 成 了 大 多 数 高 级 页 面 的 中 枢 神经 系统 。 

本 附录 是 一 个 极度 浓缩 的 JavaScript 教 程 。 换 句 话 说， 这 个 附录 不 会 面面俱到 地 介绍 
JavaScript, 也 不 会 让 一 个 没 写 过 一 行 代 码 的 人 马上 就 能 上 手写 程序 。 不 过 , 要 是 你 有 一 些 编程 语 
言 的 基础 知识 比如 学 过 Visual Basic， 懂 得 Pascal 的 基础 知识 ,或 者 有 C 语 言 的 经 验 ， 那 么 本 
附录 可 以 帮 你 转换 到 JavaScript 的 语 境 之 下 。 对 变量 、 循 环 、 条 件 逻 辑 等 常见 的 语言 要 素 , 我 们 都 
会 涉及 。 另 外 ， 对 于 本 书 JavaScript 示 例 中 用 到 的 基本 语言 要 素 ， 我 们 也 会 介绍 到 。 





提示 “如果 你 没有 把 握 能 轻松 上 手 ， 可 以 再 看 看 David Sawyer McFarland 的 JavaScript & jQuery: 
The Missing Manual。 该 书 介 绍 了 jQuery 这 个 流行 的 JavaScript 工 具 包 。 另 外 ，Mozilla 详 尽 
的 JavaScript 参 考 指南 也 值得 学 习 : http://developer.mozilla.org/JavaScript。 


B.1 在 网 页 中 使 用 JavaScript 

在 接触 JavaScript 代 码 之 前 , 需要 知道 把 它们 放 在 网 页 的 什么 地 方 。 当 然 是 以 <script> 元 素 开 
头 啦 。 接 下 来 的 几 节 会 展示 如 何 将 一 个 包含 临时 应 急 的 JavaScript 代 码 的 网 页 ， 组 织 成 结构 合理 、 
适合 在 线 部 署 的 页 面 。 
B.1.1 在 标记 中 骨 入 脚本 

使 用 <script> 元 素 的 最 简单 方式 ， 就 是 把 它 放 在 HTML 标 记 中 的 某 个 地 方 ， 比 如 : 
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<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>A Simple JavaScript Example</title> 
</head> 


<body> 
<p>At some point in the processing of this page, a script block 
will run and show a message box.</p> 


<script> 
alert("We interrupt this web page with a special JavaScript announcement."); 
</script> 


<p>If you get here, you've already seen it.</p> 
</body> 
</html> 


这 里 的 脚本 块 中 只 包含 一 行 代码 。 不 过 , 要 在 其 中 加 入 一 系列 操作 也 并 非 难事 。 就 这 个 例子 
而 言 ， 这 行 代码 会 触发 JavaScript 内 置 的 alert() 函 数 。 这 个 函数 接收 一 段 文本 ， 然 后 通过 一 个 消 
息 框 显示 出 来 (参见 图 B-1 )。 要 继续 浏览 网 页 ， 用 户 必须 单 击 OK 按钮 。 


















































cml 图 B-1: 浏览 器 遇 到 JavaScript 代 码 时 ， 
AS ) 全 | cNHTML5\Appendix B\SimpleJavaScript.html PProx | ne oy 不 会 立即 运行 它 。 事实 上 ， 浏览 器 会 暂 
CE 时 停止 页 面 处 理 。 此 时 ， 除 非 用 户 按 下 
At some point in the processing of this bage. a script block will run and show a OK 按钮 关闭 消息 框 , 否则 代码 会 一 直 处 
message box. i 四 > i 
a 等 待 状态 。 按 下 OK 按钮 , 代码 就 可 以 
i 荐 一 | 执行 到 脚本 块 的 末尾 ， 而 浏览 器 也 可 以 
继续 处 理 其 他 标记 





I » We interrupt this web page with a special JavaScript announcement. 


Ee 























有 下 100% ~ 

















注意 ”这 个 例子 中 体现 了 JavaScript 代 码 的 一 个 最 重要 的 约定 ， 这 个 约定 本 书 始终 在 遵守 ， 而且 
规范 的 网 站 脚本 中 也 都 会 注意 ， 那 就 是 分 号 。 在 JavaScript 中 ， 分 号 表示 每 条 语言 的 结束 。 
严格 地 讲 ， 分 号 有 时 候 并 不 是 必需 的 (除非 你 把 多 条 语句 写 在 一 行 上 )。 不 过 ， 始 终 给 每 
条 语言 末尾 加 上 分 号 还 是 良好 的 习惯 。 


如 果 你 希望 立即 运行 JavaScript ( 就 像 这 个 例子 这 样 )， 可 以 把 <script> 区 块 放 在 <body> 区 块 的 
最 后 ， 正 好 位 于 </body> 标 签 之 前 的 地 方 。 这 样 ， 脚 本 就 会 在 浏览 器 刚好 处 理 完 所 有 标记 之 后 运行 。 
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处 理 Internet Explorer 的 “怪癖 ” 

如 果 是 在 Firefox 或 Chrome 中 运行 这 个 弹出 警告 框 的 例子 , 那 你 不 会 发 现任 何 问题 。 如 果 
是 在 Interent Explorer 中 运行 ， 结 果 可 能 就 大 不 一 样 。 你 可 能 会 看 到 页 面 顶部 或 底部 出 现 一 个 
黄色 的 警告 条 ( 取决 于 了 的 版 本 )。 如 果 不 单 击 那个 黄 条 上 的 Allow Blocked Content ( 允许 阻 
塞 的 内 容 )， 那 JavaScript 代码 就 不 会 执行 。 

本 的 安全 警告 这 不 是 要 把 用 户 吓 跑 吗 ? 别 担心 ， 这 个 警告 只 是 IE 在 运行 本 地 硬盘 上 的 网 
页 时 的 一 个 常见 “ 怪 乌 ”。 如果 你 是 在 网 上 打开 同一 个 页 面 ， 卫 不 会 给 出 这 个 多 此 一 举 的 警告 。 

换 名 话说， 至少 在 本 地 测试 网 页 时 ,这 个 安全 警告 会 很 讨厌 。 想 想 , 每 次 都 明确 地 告诉 浏 
览 器 允许 页 面 运行 JavaScript， 实 在 太 麻 烦 了 。 为 了 解决 这 个 问题 ， 可 以 让 下 以 为 你 是 从 Web 
服务 器 下 载 页 面 。 怎 么 做 呢 ? 就 是 在 页 面 头 部 加 一 条 所 谓 的 “mark of the Web” 注 释 : 

<head> 

<meta charset="utf-8"> 

《!-- saved from url=(0014)about:internet --> 

</head> 

IE 看 到 这 个 注释 后 ， 就 会 像 页 面 来 自 Web 服务 器 一 样 处 理 它 。 ee Tr 
个 安全 警告 ,义无反顾 地 运行 JavaScript 代码, 对 于 其 他 浏览 器 来 说 , 这 条 注释 跟 普通 的 HTML 
注释 没有 分 别 ， 因 此 会 被 浏览 器 忽略 。 


B.1.2 ”函数 


前 面 例子 有 一 个 问题 , 那 就 是 把 代码 和 标记 混在 了 一 起 。 为 了 让 代码 井井有条 , 应 将 代码 要 
完成 的 每 个 “任务 ”包装 到 一 个 函数 里 。 函 数 ， 就 是 一 个 可 执行 的 代码 单位 ， 在 需要 的 时 候 可 以 
调用 它 。 

创建 函数 时 ， 要 记得 给 函数 起 个 描述 性 的 名 字 ， 比 如 这 个 叫 showMessage() 的 函数 : 


function showMessage() { 
// 这 里 是 函数 的 代码 …… 


函数 体 ， 就 像 函数 的 五 脏 六 腑 ,包括 了 从 起 始 花 括 号 〈({ ) 到 结束 花 括 号 (} ) 之 间 的 所 有 内 
容 。 在 这 两 个 界定 符 内 ， 可 以 写 任意 多 的 代码 。 这 个 showMessage() 函 数 只 有 一 行 ， 就 是 “// 这 
里 是 函数 代码 ……” 这 行 注释 ( JavaScript 的 单行 注释 以 两 条 和 斜 杜 开头 。 浏览 器 会 忽略 注释 ， 写 注 
释 是 为 了 提醒 自己 或 他 人 与 代码 相关 的 重要 细节 )。 

要 给 函数 添加 代码 ， 只 要 把 所 有 语句 添加 到 花 括 号 中 即 可 : 


function showMessage() { 
alert("We interrupt this web page with a special JavaScript announcement."); 


} 
当然 , 所 有 代码 都 必须 放 在 一 个 <script> 块 里 。 而 在 页 面 中 放置 JavaScript 函 数 的 最 佳 位 置 就 
是 chead> 区 块 。 通 过 把 代码 转移 到 一 个 专门 的 地 方 ， 可 以 让 页 面 内 容 分 门 别 类 ， 井井有条 。 
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以 下 是 对 前 面 示 例 代 码 进 行 修改 后 的 结果 ， 这 次 使 用 了 函数 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>A Simple JavaScript Example</title> 
<script> 
function showMessage() { 
alert("We interrupt this web page with a special JavaScript announcement."); 
} 
</script> 
</head> 














函数 ， 如 果 只 是 定义 它 ， 其 实 什么 也 不 会 做 。 要 触发 函数 执行 ， 必 须 有 代码 调用 它 。 

调用 函数 很 简单 ， 我 们 不 是 已 经 调用 过 alert() 函 数 了 嘛 。 对 ， 就 是 写 出 函数 名 ， 然 后 再 加 
上 一 对 圆 括 号 。 在 这 对 圆 括号 里 ， 可 以 向 函数 传 和 数据。 或 者 ， 如 果 函 数 本 身 不 接收 数据 ， 比 如 
这 里 的 showMessage()， 那 也 可 以 什么 也 不 传 : 























<body> 
<p>At some point in the processing of this page, a script block 
will run and show a message box.</p> 
<script> 
showMessage(); 
«</script> 
<p>If you get here, you've already seen it.</p> 
</body> 
</html> 


这 个 例子 中 ， 函 数 和 调用 函数 的 代码 在 不 同 的 <script> 块 里 。 不 是 必须 要 这 样 的 ， 这 里 这 样 

用 是 有 意 强调 这 两 块 的 分 离 。 

乍 一 看 ， 添 加 一 个 函数 似乎 让 这 个 例子 比 以 前 复杂 了 。 但 这 其 实 是 设计 上 一 个 很 大 的 进步 ， 

且 听 我 慢 慢 说 。 

口 代码 已 经 脱离 了 标记 。 只 要 一 行 代码 就 可 以 调用 苑 数 。 不 过 ， 真 正 的 函数 会 包含 很 多 代 

码 ， 而 真正 的 网 页 也 会 包含 大 量 函 数 。 所 以 ,肯定 要 把 代码 与 标记 分 开 。 

口 可 以 重用 代码 。 把 代码 以 函数 形式 包装 起 来 之 后 ， 任 何 时 候 都 可 以 调用 它 ， 也 不 用 管 是 
在 代码 的 什么 地 方 。 对 于 这 个 简单 的 例子 ， 这 一 点 似乎 不 明显 ， 而 对 于 像 第 8 章 那 样 较为 
复杂 的 例子 ， 这 个 优点 就 非常 重要 了 。 

口 只 差 一 点 就 可 以 把 脚本 转移 到 外 部 文件 中 了 。 把 代码 从 标记 中 移出 来 可 以 为 建立 单独 的 

脚本 文件 作 好 准备 ， 下 一 节 就 会 介绍 到 ， 引 用 外 部 代码 文件 更 容易 组 织 和 管理 。 

口 可 以 使 用 事件 了 。 什么 是 事件 ? 事件 就 是 在 某 件 事 发 生 时 , 可 以 告诉 页 面 执行 某 个 函数 。 
在 事件 驱动 的 页 面 中 ， 有 很 多 代码 是 靠 事 件 来 触发 执行 的 ( 而 不 是 加 载 后 立即 执行 )。 
件 与 函数 相辅相成 ， 具 体 细节 请 参考 B.1.4 节 。 
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注意 一 个 网 页 可 以 包含 任意 多 个 cscript> 块 。 


B.1.3 ”把 代码 转移 到 脚本 文件 中 


把 JavaScript 代 码 集中 到 一 块 , 特别 是 集中 到 一 个 函数 里 , 是 让 代码 有 序 的 第 一 步 。 第 二 步 就 
是 把 脚本 代码 放 到 一 个 完全 独立 的 文件 中 。 这 样 一 来 ,网 页 的 体积 就 会 变 小 ， 同 时 函数 还 可 以 在 
更 多 网 页 中 得 到 最 大 限度 的 重用 。 事 实 上 ， 把 脚本 代码 放 在 外 部 文件 里 ， 与 把 CSS 样 式 规则 放 在 
外 部 文件 里 异曲同工 。 都 能 简化 页 面 ， 同 时 获得 更 大 的 灵活 性 。 

















注意 ”真正 设计 良好 的 网 页 都 会 把 JavaScript 代 码 放 在 一 或 多 个 文件 里 。 当 然 也 有 例外 ， 那 就 是 
不 会 重用 的 、 数 量 很 少 的 代码 ， 或 者 一 次 性 示例 的 代码 ， 仍 然 可 以 放 在 网 页 里 。 

















脚本 文件 也 是 纯 文本 文件 。 一 般 来 说 ， 脚 本 文件 的 扩展 名 是 .js( 代表 JavaScript )。 把 脚本 代 
码 放 在 文件 里 , 就 要 去 掉 <script> 标 签 。 比 如, 下面 这 些 代码 就 是 MessageScriptsjs 中 的 全 部 内 容 : 


function showMessage() { 
alert("We interrupt this web page with a special JavaScript announcement."); 


} 
保存 这 个 文件 ,然后 把 它 放 在 与 网 页 相同 的 文件 夹 里 。 在 网 页 里 ， 再 定义 一 个 脚本 标签 , 但 
这 次 不 写 任何 代码 ， 而 是 添加 一 个 src 属 性 ， 给 出 刚才 创建 的 脚本 文件 的 路 径 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>A Simple JavaScript Example</title> 
<script src="MessageScripts.js"></script> 
</head> 














<body> 
<p>At some point in the processing of this page, a script block 
will run and show a message box.</p> 
<script> 
showMessage() 
</script> 
<p>If you get here, you've already seen it.</p> 
</body> 
</html> 


浏览 器 在 遇 到 这 个 脚本 标签 时 ， 会 请 求 MessageScripts.js 文 件 ， 然 后 就 像 其 内 容 是 写 在 网 页 
里 一 样 执行 文件 里 的 代码 。 也 就 是 说 ， 可 以 像 以 前 一 样 调 用 showMessage() 函 数 。 


注意 ”在 使 用 外 部 文件 时 ， 即 使 脚本 块 中 不 包含 任何 代码 ， 也 必须 以 </script> 标 签 来 结束 它 。 如 果 
不 写 这 个 结束 标签 ， 那 浏览 器 会 假设 后 面 的 一 切 ( 包括 页 面 标记 )， 仍然 还 是 JavaScript 代 码 。 
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也 可 以 使 用 来 自 其 他 网 站 的 JavaScript 函 数 ， 只 要 把 <script> 元 素 的 src 属 性 指向 一 个 完整 的 
URL ( 比如 http://SuperScriptSite.com/MessageScript.js ) 即 可 ， 只 写 一 个 文件 名 是 不 行 的 。 这 个 技 
术 对 于 引入 其 他 公司 的 Web 服 务 ( 比如 Google Maps， 参 见 13.1.5 节 ) 是 非常 重要 的 。 


B.1.4 响应 事件 


现在 ,我 们 已 经 知道 脚本 怎样 立即 运行 了 一 一 就 是 在 HTML 标 记 中 放 一 个 脚本 块 。 但 是 , 更 
常见 的 运行 脚本 的 方式 ,其实 是 在 页 面 加 载 之 后 , 在 用 户 单 击 按钮 或 把 鼠标 移 到 某 个 元 素 上 的 时 
候 再 运行 。 

为 此 , 就 需要 用 到 JavaScript 事 件 。JavaScript 事 件 是 在 特定 的 事情 发 生 时 ， 由 HTML 元素 发 出 
的 通知 。 比 如 ，JavaScript 为 每 个 元 素 都 赋予 了 一 个 名 为 onMouse0ver ( 即 “ 鼠 标 悬 停 ”) 的 事件 。 
顾名思义 ， 这 个 事件 会 在 用 户 把 鼠标 指针 移动 到 一 个 元 素 ( 如 段落、 链接 、 图 片 、 表 格 单元 格 或 
文本 框 ) 上 面 的 时 候 发 生 〈 或 用 程序 员 的 话 ， 叫 触发 )。 在 这 个 操作 触发 onMouse0ver 事 件 后 ， 代 
码 文 件 就 会 执行 。 

那 怎么 把 代码 与 事件 关联 起 来 呢 ? 这 可 是 个 关键 的 问题 。 方 法 是 为 相应 的 元 素 添 加 一 个 事件 
属性 。 比 如 ， 要 想 处 理 <img> 元 素 上 的 onMouse0ver 事 件 ， 就 可 以 这 样 来 写 : 


<img src="sunny.jpg" alt="A sunny day" onmouseover="showMessage()"> 








































































































注意 ”在 JavaScript 中 ， 函 数 、 变 量 和 对 象 名 都 区 分 大 小 写 。 也 就 是 说 ，SshowMessage 和 showMESS 
AGE 不 是 一 回 事 ( 后 者 在 这 里 无 效 )。 可 是 ， 事 件 属性 名 却 不 区 分 大 小 写 。 因 为 从 技术 角 
度 讲 ， 它 们 是 HTML 标 记 ， 而 HIML 标记 允许 属性 是 任意 大 小 写 形式 。 虽 然 如 此 ， 事 件 属 
性 名 全 部 小 写 (如 上 所 示 ) 仍然 是 非常 常见 的 ， 一 方面 这 样 符合 XHTML 的 书写 规则 ， 另 
一 方面 大 多 数 程序 员 也 都 懒得 去 按 Shift 键 。 


这 样 ， 在 鼠标 移动 到 图 片上 的 时 候 ， 就 会 触发 onMouse0ver 事 件 ， 而 浏览 需 则 会 自动 调用 
showMessage() 函 数 ， 然 后 显示 一 个 消息 框 〈 图 B-2 )。 通 过 事件 来 触发 执行 的 函数 ， 叫 做 事件 处 
理 程序 。 

为 了 有 效 地 使 用 事件 , 应 该 知道 JavaScript 支 持 哪 些 事 件 。 此 外 , 还 应 该 知道 哪些 元 素 支 持 哪 
些 事 件 。 表 B-1 列 出 了 常见 的 事件 ， 以 及 支持 这 些 事件 的 元 素 ( 更 完整 的 参考 信息 ， 请 访问 
http://developer.mozilla.org/en/DOM/element )。 
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We interrupt this web page with a special 
JavaScript announcement. 


(estes) 


Le J 














Le] 重型 | 图 B-2: 在 这 个 例子 中 ,鼠标 移动 到 图 片上 
| | | Javascript Events [+| EE 就 会 看 到 弹 a 的 警告 框 








表 B-1 常用 的 HTML 对 象 事件 








事 件 名 说 明 适用 元 素 

onClick 鼠标 单 击 元 素 时 触发 所 有 元 素 

onMouseOver 鼠标 悬 停 在 元 素 上 时 触发 所 有 元 素 

onMouseOut 鼠标 从 元 素 上 移 开 时 触发 所 有 元 素 

onKeyDown 按 下 某 个 键 时 触发 <select>、<input>、<textarea>、 
<a>、<button> 

onkeyUp 释放 某 个 键 时 触发 <select>、<input>、<textarea>、 
<a>、<button> 

onFocus 控件 接收 到 焦点 时 (也 就 是 鼠标 指针 位 于 控件 中 , 可 <select>、xinput>、<textarea>、 


以 输入 的 时 候 ) 触发 。 这 里 所 说 的 控件 包括 文本 框 、 
复 选 框 等 ， 请 参考 4.2 节 表 4-1 

















onBlur 焦点 从 控件 移 开 时 触发 

onChange 修改 了 控件 中 的 值 之 后 触发 。 对 文本 框 而 言 ， 当 移动 
到 下 一 个 控件 时 才 会 触发 

onSelect 选择 输入 控件 中 的 部 分 文本 时 触发 

onError 浏览 器 下 载 图 片 失 败 时 触发 (通常 是 因为 URL 错 误 ) 

onLoad 浏览 器 下 载 完 新 页 面 或 加 载 完 对 象 (如 图 片 ) 时 触发 

onUnload 浏览 器 仓 载 页 面 时 触发 (在 浏览 器 地 址 栏 中 输入 新 
URL 或 点 击 链接 时 发 生 ， 而 且 是 在 浏览 器 加 载 新 页 面 
前 发 生 ) 
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<a>、<button> 


<select>、<xinput>、 
<a>、<button> 


<textarea> 、 


<select>、<input type="text">、 


<textarea> 


<input type="text">、<textarea> 


<img> 
<img>、<body> 
<body> 


简明 的 附录 难以 详尽 解释 任何 语言 ,即使 是 像 JavaScript 这 么 直观 的 语言 也 是 不 可 能 的 ,不 过 ， 
为 了 帮助 读者 更 好 地 理解 本 书 中 给 出 的 示例 ， 下 面 我 们 还 是 给 出 一 些 相关 的 基础 知识 。 
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B.2.1 变量 


所 有 编程 语言 都 有 变量 的 概念 , 所 谓 变量 就 是 一 个 可 以 在 内 存 中 保存 数据 的 容器 。JavaScript 
中 的 变量 也 不 例外 ,但 它 是 用 var 关 键 字 后 跟 变 量 名 声明 的 。 下 面 这 行 代码 创建 了 一 个 名 为 


myMessage 的 变量 : 

















var myMessage; 


注意 ”JavaScript 区 分 大 小 写 , 意思 是 myMessage 与 MyMessage 不 一 样 。 如 果 你 不 在 乎 ， 那 就 会 看 到 
错误 提示 ( 当然 , 前 提 是 浏览 器 脾气 不 错 ), 或 者 看 到 页 面 发 生 错误 ( 一般 这 种 情况 居多 )。 











要 在 变量 中 保存 信息 , 要 使 用 等 号 (= )， 等 号 会 将 其 右 侧 的 数据 复制 给 左 侧 的 变量 。 下 面 这 
个 例子 定义 了 一 个 变量 ,然后 把 一 个 文本 值 ( 文本 值 就 是 字符 串 ) 放 人 其 中 : 

var myMessage = "Everybody loves variables"; 

然后 就 可 以 使 用 变量 了 : 


// 在 消息 框 中 显示 变量 中 保存 的 文本 
alert(myMessage); 


注意 JavaScript 是 尽 人 辟 知 的 松散 类 型 的 语言 ， 即 使 不 使 用 var 关 键 字 声明 ， 照 样 可 以 使 用 变 
量 。 然 而 ， 不 声明 就 使 用 变量 却 是 一 个 非常 不 好 的 习惯 ， 因 为 它 会 导致 难以 预料 的 错误 。 


B.2.2 null 值 


nul1 值 是 一 个 特殊 值 ， 程 序 员 管 它 叫 做 空 值 。 如 果 变 量 值 是 nul1， 那 就 表示 给 定 对 象 不 存在 
或 是 空 的 。 根据 所 在 上 下 文 不 同 ,这 可 能 表示 某 个 功能 无 效 。 例 如 ，Modernizr ( 1.6.3 节 ) 用 null 
值 判 断 浏览 器 是 否 支 持 某 个 HTML5 功 能 。 在 脚本 中 也 可 以 检测 nul1 值 ， 比 如 确定 还 没有 创建 某 
个 对 象 : 
if (myObject == null) { 
// 不 存在 my0bject 对 象 
// 现 在 可 以 创建 它 了 
} 


芭 











六 





B.2.3 ”变量 作用 域 
可 以 创建 变量 的 地 方 主要 有 两 个 , 一 个 是 函数 内 , 一 个 是 函数 外 。 下 面 的 代码 展示 了 这 两 种 
情况 : 


<script> 
var outsideVariable; 
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function doSomething() { 
var insideVariable; 


3 


</script> 

如 果 是 在 函数 内 部 创建 变量 ( 此 时 叫 局 部 变量 ), 则 该 变量 只 在 函数 运行 的 时 候 存 在 。 在 此 ， 
insideVariable 是 一 个 局 部 变量 。 只 要 doSomething() 方 法 一 结束 ， 这 个 变量 就 从 内 存 中 消失 了 。 
换 名 话说， 下 次 再 执行 dogomething() 方 法 ， 会 重新 创建 insidevariable 变 量 ， 与 之 前 的 那个 变量 
毫 无 关系 。 

另 一 方面 ， 如 果 是 在 函数 外 部 创建 变量 ( 此 时 叫 全 局 变量 )， 则 该 变量 的 值 会 在 浏览 器 加 载 
页 面 期 间 始终 存在 。 更 进一步 ， 所 有 函数 都 可 以 使 用 这 个 变量 。 对 于 前 面 的 例子 来 说 ， 


outsideVariable 是 一 个 全 局 变量 。 




















提示 “经验 表明 ， 最 好 使 用 局 部 变量 ， 除 非 确实 需要 在 多 个 函数 间 共 享 变量 ， 或 者 想 在 函数 结 
束 后 仍然 保留 变量 的 值 。 因 为 如 果 创建 的 全 局 变量 太 多 ， 管 理 难度 会 非常 大 ， 代 码 很 容 
易 乱 套 。 


B.2.4 变量 数据 类 型 


在 JavaScript 中 ， 变 量 可 以 保存 不 同类 型 的 数据 ， 比 如 文本 、 整 数 、 浮 点 数 、 数 组 和 对 象 。 
但 是 , 无 论 在 变量 中 保存 什么 值 ， 都 是 使 用 同一 个 var 关 键 字 。 换 句 话 说 ,不 必 设 置 变量 的 数据 
类 型 。 

什么 意思 呢 ? 就 是 说 ， 你 可 以 给 保存 着 文本 的 变量 myMessage 赋 予 一 个 数字 值 ， 比 如 : 

myMessage = 27.3; 

不 区 分 变量 的 数据 类 型 让 JavaScript 变 得 很 灵活 , 因为 变量 可 以 保存 的 内 容 不 受 限制 。 与 此 同 
时 ,这 个 灵活 性 在 不 经 意 间 也 会 导致 JavaScript 错 误 。 比 如 , 我 们 想 从 文本 框 中 取得 文本 ,然后 将 
其 放 在 一 个 变量 中 : 

var = inputElement.value; 

但 是 ， 如 果 不 小 心 的 话 ， 也 可 能 会 意外 地 把 整个 文本 框 对 象 都 保存 到 这 个 变量 里 : 

var = inputElement; 

这 两 行 代码 都 会 执行 , 没有 任何 问题 。 但 只 要 几 行 类 似 的 代码 ， 就 会 造成 将 来 无 法 恢复 的 错 
误 。 此 时 ， 浏 览 器 只 会 停止 运行 其 他 代码 ， 不 会 告诉 你 到 底 发 生 了 什么 错误 。 这 种 情况 就 需要 
JavaScript 调 试 工具 了 【参见 B.2.5 节 附注 栏 )， 它 可 以 让 你 随时 暂停 代码 执行 并 查看 变量 当前 所 含 
的 数据 。 
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B.2.5 ”运算 





对 数字 值 所 能 做 的 最 有 意义 的 事情 ,， 莫 于 对 其 执行 运算 ， 从 而 改变 数据 。 比 如 ， 可 以 使 用 算 
术 运 算 符 来 执行 数学 计算 : 

var myNumber = (10 + 5) * 2 /5; 

这 行 代码 会 遵循 标准 的 数学 运算 法 则 ( 先 计 算 括 号 里 的 , 再 计算 乘法 ,然后 计算 除法 ,最 后 
是 加 、 减 法 )。 计算 结果 是 6。 











认识 JavaScript 代 码 中 的 错误 
为 了 解决 问题 〈 如 前 面 提 到 的 变量 错误 )， 需 要 掌握 调试 的 技术 。 也 就 是 说 ， 出 了 问题 之 
后 ,你 必须 能 够 找到 错误 原因 ， 然 后 消灭 之 。 可 是 ， 如 何 调试 取决 你 使 用 的 浏览 器 。 不同 的 浏 
览 器 提供 了 不 同 的 调试 工具 (或 支持 不 同 的 调试 扩展 )。 虽 然 它 们 都 用 于 相同 的 目的 ， 但 使 用 
方法 却 不 尽 相 同 。 
好 在 ， 所 有 信息 都 可 以 在 网 上 查 到 。 下 面 就 给 出 了 一 些 链接 ， 其 中 介绍 了 如 何在 不 同 浏览 

器 下 调试 JavaScript 错误 。 
口 Internet Explorer。 要 通过 IE 调试 ， 按 F12 键 ， 可 以 看 到 开发 人 员工 具 窗口 。 至 于 如 何 
使 用 ， 请 参考 http://tinyurl.com/debug-ie。 
口 Firefox。 严 肃 的 Firefox 开发 人 员 都 使 用 一 个 名 "| Firebug ( http://getfirebug.com/javascript ) 

的 Firefox 插件 , 通过 它 了 解 自己 代码 的 运行 情况 ,可 以 从 http://getfirebug.com/javascript 

下 载 这 个 插件 并 了 解 更 多 信息 。 
口 Chrome。Chrome 内 置 了 一 个 非常 不 错 的 调试 工具 。 要 学 习 使 用 这 个 调试 工具 ， 请 参考 
谷歌 的 调试 教程 : http://tinyurl.com/c-debugger。 
口 Opera。Opera 提供 的 调试 工具 叫 Dragonly， 可 以 在 www.opera.com/dragonfly 了 解 相关 
计 司 5 
口 Safari。Safari 也 有 一 组 内 置 的 调试 工具 ， 功 能 很 强大 ， 不 过 要 查看 相关 使 用 文档 却 有 点 

费劲 。 建 议 从 Safari 开发 人 员 资 料 库 的 这 篇 技术 文章 开始 : http://tinyurl.com/630om77c。 
记 住 , 解决 问题 与 使 用 的 浏览 器 和 调试 工具 无 关 。 只 要 把 问题 解决 了 ,所 有 人 就 都 不 会 再 
看 到 这 个 错误 了 。 





























通过 运算 也 可 以 把 多 段 文 本 拼接 成 一 个 长 字符 串 。 在 这 里 ， 可 以 使 用 加 号 (+ ) 运算 符 : 


var firstName = "Sarah"; 
var lastName = "Smithers"; 
var fullName = firstName + " " + lastName; 


现在 fullName 变 量 里 保存 着 文本 “Sarah Smithers.”( 代码 中 的 " "告诉 JavaScript 在 两 个 名 字 间 
加 上 一 个 空格 )。 
在 对 变量 进行 简单 的 修改 时 ， 可 以 使 用 一 个 快捷 方式 。 例 如 ， 以 下 是 一 个 简单 的 加 法 运算 : 


Var myNumber = 20; 
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myNumber = myNumber + 10; 
// (现在 myNumber 值 为 30。) 


但 这 行 代码 也 可 以 简写 成 这 样 : 
var myNumber = 20; 


myNumber += 10; 
// (现在 myNumber 值 为 30。) 


像 这 样 把 运算 符 移 到 等 号 左 侧 的 做 法 也 适合 其 他 很 多 运算 符 。 下 面 再 举 几 个 例子 : 


var myNumber = 20; 
myNumber -= 10; 

// (现在 myNumber 值 为 10。) 
myNumber *= 10; 

// (现在 myNumber 值 为 100。) 





var myText = "Hello"; 
var myText += " there."; 
// (现在 myText 的 值 为 "Hello there.") 


另外， 如 果 你 想 要 给 现在 的 变量 加 1 或 减 1， 还 有 一 个 更 简洁 的 方式 : 


var myNumber = 20; 
myNumber++; 
// (现在 myNumber 值 为 21。) 


myNumber--; 
// (现在 myNumber 值 为 20。) 


B.2.6 ”条件 逻辑 


所 有 条 件 逻 辑 都 以 一 个 条 件 开 始 。 条 件 就 是 一 个 表达 式 ， 返 回 值 为 true 或 false。 根 据 这 个 
表达 式 的 结果 ， 可 以 决定 是 运行 后 面 的 代码 ， 还 是 跳 过 它 。 
要 创建 条 件 ， 就 要 用 到 JavaScript 的 逻辑 运算 符 ， 如 表 B-2 所 示 。 
表 B-2 ”逻辑 运算 符 

















运算 符 说 明 
加 等 于 
二 不 等 于 
二 精确 等 于 〈 值 和 数据 类 型 ) 
l= 非 精 确 等 于 
! 逻辑 非 (对 条 件 取 反 ， 即 如 果 条 件 原 来 为 true， 现 在 就 是 false， 反之 亦 然 ) 
< 小 于 
> 大 于 
3 小 于 等 于 
2 大 于 等 于 
&& 逻辑 与 (如果 两 个 表达 式 都 为 true， 返 回 true) 。 如 果 第 一 个 表达 式 为 false， 不 会 对 第 二 个 表达 式 求 值 
| 逻辑 或 任意 一 个 表达 式 为 true， 返 回 true) 。 如 果 第 一 个 表达 式 .为 true， 不 会 对 第 二 个 表达 式 求 值 
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下 面 一 个 条 件 逻辑 的 简单 例子 : 
myNumber < 100 
要 基于 条 件 作 决 定 ， 需 要 把 它 与 if 语 句 一 起 使 用 ， 如 : 


if (myNumber < 100) { 
// (如 果 myNumber 等 于 20， 会 运行 这 里 的 代码 ; 如 果 它 等 于 147， 就 不 会 运行 了 。) 
} 





注意 ”从 技术 上 讲 ， 如 果 条 件 代码 不 超过 一 行 ， 不 需要 使 用 花 括 号 来 包装 ， 但 始终 使 用 花 括 号 


可 以 保证 代码 清晰 ， 避 免 在 处 理 多 条 语句 时 发 生 错 误 。 




















在 测试 相等 性 时 ， 一 定 要 使 用 两 个 等 号 。 因 为 一 个 等 号 是 设置 变量 的 值 ， 而 不 是 执行 比较 : 


// 正 确 
if (myName == "Joe") { 
} 


// 错 误 
if (myName = "Sarah") { 
} 


两 个 等 号 很 好 ,但 事实 证 明 三 个 更 好 ,许多 JavaScript 开 发 者 更 推荐 用 “精确 等 于 ”运算 符 ( === 








检测 相等 ， 而 不 仅仅 是 “等 于 ”( == )。 二 者 的 不 同 之 处 在 于 ,“ 等 于 ”运算 符 会 将 两 侧 变 量 转化 
为 同一 种 数据 类 型 ， 而 更 严格 的 “精确 等 于 ”操作 符 会 要 求 两 侧 变 量 的 数据 类 型 和 值 都 相同 。 


的 类 


历 一 


下 面 这 个 例子 演示 了 这 种 区 别 : 
var myNumberAsText = "45"; 


// 此 为 真 ， 因 为 “等 于 ”运算 符 会 将 字符 囊 "45" 转 换 为 数字 45 
if (myNumberAsText == 45) { 


// 此 为 假 ， 因 为 数据 类 型 不 匹配 
if (myNumberAsText === 45) { 
} 


大 多 数 情况 下 ， 用 “等 于 ”或 “精确 等 于 ”运算 符 都 行 , 但 “精确 等 于 ”能 防止 一 些 不 常见 
型 转化 。 因 此 ，JavaScript 专 家 通常 更 喜欢 用 三 个 等 号 而 不 是 两 个 。 

如 果 想 要 对 多 个 条 件 一 个 一 个 地 求 值 ， 那 么 可 以 使 用 多 个 if 块 ( 当然 啦 )。 但 如 果 是 想 要 遍 
系列 条 件 ， 只 找到 一 个 匹配 的 表达 式 ( 忽略 其 他 情况 )， 则 可 以 使 用 else 关 键 字 ， 比 如 : 


if (myNumber < 100) { 
// (如 果 myNumber 小 于 100， 则 运行 这 行 代码 。) 








else if (myNumber < 200) { 
// (如 果 myNumber 大 于 或 等 于 100， 但 小 于 200， 则 运行 这 行 代码 。) 


else { 
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// (其 他 情况 下 ， 即 myNumber 大 于 或 等 于 200， 则 运行 这 行 代码 。) 





} 
可 以 使 用 任意 多 个 if 块 ， 而 最 后 的 else 语 句 也 是 可 选 的 。 
B.2.7 ”循环 














循环 是 一 种 基本 的 编程 手段 , 可 以 重复 地 执行 一 个 代码 块 。JavaScript 循 环 的 主力 是 for 循 环 ， 
它 本 质 上 是 有 一 个 包含 内 置 计 数 需 的 循环 。 大 多 数 编程 语言 都 有 自己 的 for 循 环 结构 。 
编写 for 循 环 时 ， 首 先 要 设置 计数 需 的 起 始 值 ， 然 后 再 设置 终止 值 ， 再 设置 每 次 循环 计数 需 
增加 的 值 。 来 看 一 个 例子 : 

for (var i = 0; i < 5; i++){ 
// (这 行 代 码 执行 5 次 。) 


alert("This is message: " + i); 


} 

循环 开始 是 一 个 包含 三 个 重要 部 分 的 括号 。 第 一 部 分 ( 即 var i = 0 ) 创建 了 计数 器 变量 (i) 
并 设置 了 它 的 初始 值 (0)。 第 二 部 分 (i < 5 ) 设置 了 终止 条 件 。 如 果 不 是 true ( 例如 ，i 增 加 到 
了 5 )， 循 环 结束 ， 内 部 的 代码 不 再 重复 执行 。 第 三 部 分 (i++ ) 增加 计数 器 变量 。 对 这 个 例子 而 
言 ， 每 次 循环 计数 器 变量 加 1。 也 就 是 说 ， 第 一 次 循环 i 等 于 0， 第 二 次 循环 i 等 于 1 ， 以 此 类 推 。 
最 终结 果 是 代码 会 运行 5 次 ， 展 示 下 列 消息 : 

This is message: 

This is message: 

This is message: 


This is message: 
This is message: 
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B.2.8 数组 


数组 与 for 循 环 可 谓 是 天 作 之 合 。 数 组 就 是 一 个 对 象 ， 可 以 保存 一 系列 值 。 

JavaScript 数 组 异常 灵活 。 与 其 他 编程 语言 不 同 ， 在 JavaScript 中 不 必定 义 数 组 的 项 数 。 一 开 
始 只 要 使 用 方 括号 就 可 以 创建 一 个 空 数组 ， 比 如 : 

var ColorList = []; 

然后 ， 使 用 数组 的 push() 方 法 可 以 添加 元 素 : 


colorList.push("blue"); 
colorList.push("green"); 
colorList.push("red"); 


或 者 ， 可 以 指定 数组 某 个 具体 位 置 上 的 元 素 。 如 果 内 存 中 的 数组 还 没有 该 位 置 ，JavaScript 
就 会 分 配 一 个 空间 : 
colorList[3] = "magenta"; 


当然 ， 也 可 以 通过 位 置 来 取得 数组 元 素 的 值 : 
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var color = colorList[3]; 


注意 ”JavaScript 数 组 使 用 基于 零 的 值 来 存 取 元 素 。 数组 第 一 项 的 索引 值 为 0, 第 二 项 的 索引 值 为 
1， 以 此 类 推 。 


在 有 了 保存 着 值 的 数组 之 后 ， 可 以 使 用 for 循 环 来 处 理 其 中 的 每 个 元 素 : 


for (var i = 0; i «< colorlist.length; i++) { 
alert("Found color: " + colorList[i]); 


} 

以 上 代码 从 数组 的 第 一 项 (位置 0 ) 移动 到 最 后 一 项 (位置 以 数组 的 length 属 性 减 1 表示 ， 
length 属 性 其 实 是 数组 中 的 元 素 个 数 )， 在 消息 框 中 显示 出 所 有 元 素 值 。 当 然 , 这 只 是 一 个 示例 ， 
你 可 以 使 用 同样 的 方法 完成 更 有 实际 意义 的 任务 。 

使 用 循环 来 处 理 数组 是 一 项 基本 的 JavaScript 技 术 。 本 书 示 例 中 多 次 用 到 了 这 个 技术 , 无 论 是 
你 自己 创建 的 数组 ， 还 是 其 他 JavaScript 函 数 返 回 的 数组 ， 都 可 以 处 理 。 


B.2.9 ”取得 和 返回 数据 的 函数 


前 面 我 们 看 到 了 一 个 简单 的 函数 showMessage()。 在 调用 这 个 函数 时 ， 不 需要 提供 任何 数据 ， 
调用 完成 后 ， 不 会 有 任何 信息 。 

并 不 是 所 有 函数 都 这 么 简单 。 很 多 时 候 ， 都 需要 给 函数 传人 特定 的 信息 ,或 者 从 函数 取得 返 
回 结果 ， 在 另 一 个 操作 中 使 用 该 结果 。 举 个 例子 ， 假 设 我 们 创建 一 个 showMessage() 函 数 ， 可 以 
通过 它 来 显示 不 同 的 消息 。 为 此 ， 需 要 让 showMessage() 函数 接收 一 个 参数 ( 也 叫 形 参 )。 这 个 参 
数 表 示 可 以 定制 的 文本 ， 将 来 会 在 消息 框 中 显示 。 

要 给 函数 添加 参数 ， 先 得 给 它 起 个 名 字 ， 比 如 customMessage， 然 后 把 它 放 在 函数 名 后 的 括 
号 中 ， 像 这 样 : 

function showMessage(customMessage) { 


alert(customMessage); 


} 















































注意 一 个 函数 可 以 接收 多 少 个 参数 是 没有 限制 的 。 只 要 把 所 有 参数 用 运 号 分 隔 开 即 可 。 


在 函数 内 部 , 可 以 像 使 用 变量 一 样 使 用 参数 。 对 这 个 例子 而 言 , 函数 接收 到 提供 给 它 的 文本 ， 
然后 在 消息 框 中 把 它 显示 出 来 。 

现在 , 再 调用 showMessage() 函 数 , 可 以 为 这 个 函数 的 参数 提供 一 个 值 ( 也 就 是 所 谓 的 实 参 ) : 

showMessage("Nobody likes an argument."); 
通过 参数 可 以 把 消息 发 送 给 函数 。 男 外 ,也 可 以 创建 函数 ,向 调用 它 的 脚本 发 送 回 信息 。 发 
回信 息 的 关键 是 位 于 函数 末尾 的 return 关 键 字 ， 它 会 立即 停止 函数 ， 并 返回 函数 生成 的 信息 。 
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当然 ， 更 复杂 的 函数 既 可 以 接收 信息 ， 又 可 以 返回 信息 。 比 如 ， 下 面 这 个 函数 计算 两 个 数 
( numberA 和 numberB ) 的 乘积 ， 然 后 返回 计算 结果 : 


function multiplyNumbers(numberA, numberB) { 
return numberA * numberB; 


} 
下 面 是 在 网 页 中 使 用 这 个 函数 的 例子 : 


// 传 入 两 个 数值 ， 得 到 结果 
var result = multiplyNumbers(3202, 23405); 





// 使 用 结果 来 创建 一 条 消息 
var message = "The product of 3202 and 23405 is " + result; 


// 显 示 这 条 消息 
showMessage(message); 


当然 ， 你 不 一 定 要 自己 写 函 数 来 计算 乘积 ( 因为 一 行 简 单 的 JavaScript 就 足够 了 )， 也 不 一 定 
要 写 函 数 来 显示 消息 框 ( 因为 可 以 直接 使 用 内 置 的 alert() 函 数 ), 但 这 两 个 例子 却 展示 了 函数 的 
基本 用 法 ,无论 你 要 写 的 函数 多 复杂 ， 都 要 像 前 面 的 例子 一 样 使 用 参数 和 返回 值 。 














B.2.10 “对 象 


实际 上 所 有 的 现代 编程 语言 都 包含 对 象 的 概念 , 它 是 一 个 相关 数据 与 功能 的 包 , 可 以 在 代码 
中 与 之 交互 。 比 如 ， 在 代码 的 眼 里 ， 网 页 中 每 个 HTML 元 素 都 是 一 个 对 象 。 这 个 对 象 的 属性 可 以 
用 来 读 取 或 修改 元 素 的 内 容 ， 修 改元 素 的 样式 ， 以 及 处 理 元 素 的 事件 。 
程序 员 们 也 经 常 需要 创建 他 们 自己 的 对 象 。 比 如 , 在 9.3.1 节 的 画 圆 圈 例 子 中 ,我们 要 创建 圆 
圈 对 象 ; 在 9.4.2 节 的 弹 球 例子 中 ， 我 们 要 创建 球 对 象 。 

对 象 简化 了 复杂 的 编程 ,特别 是 需要 维护 同一 个 数据 结构 的 多 个 副本 时 。 比 如 ， 如 果 需 要 用 
弹 球 填 满 页 面 , 要 创建 那么 多 变量 来 保存 每 个 球 的 位 置 和 速度 是 件 非常 令 人 头疼 的 事 。 但 如 果 有 
一 种 方式 来 声明 球 的 模板 ， 就 可 以 复 用 那个 模板 创建 大 量 的 球 对 象 ， 不 论 是 一 个 还 是 一 万 个 。 

大 部 分 语言 都 有 创建 对 象 模板 的 特定 语法 。 通常 , 这些 模板 被 称 之 为 类 。 但 JavaScript 没 有 正 
式 的 类 特性 。 这 个 足 忽 是 因为 JavaScript 的 历史 一 一 它 是 作为 一 个 简单 的 脚本 语言 问世 的 , 而 不 是 
严格 意义 上 的 构建 在 线 应 用 的 工具 。 幸运 的 是 , 聪明 的 JavaScript 工 程 师 们 找到 了 填补 这 个 对 象 空 
白 的 办 法 。 昌 然 这 些 技 术 在 诞生 之 初 像 一 种 创新 但 古怪 的 巧 计 ， 但 现在 它们 已 经 是 标准 做 法 了 。 

比如 ,如 果 要 在 JavaScript 中 定义 一 个 对 象 , 需要 先 写 一 个 对 象 定义 函数 。 这 个 对 象 定义 函数 
就 是 对 象 模板 ， 相 当 于 C#、Java 和 Visual Basic 语 言 中 的 类 。 下 面 是 用 来 创建 Person 对 象 的 对 象 定 
义 函 数 : 

function Person() { 

this.firstName = "Joe"; 


this.lastName = "Grapta"; 


} 
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对 象 定义 函数 只 有 一 个 目标 , 它 一 次 性 定义 了 构成 对 象 的 所 有 数据 。 上 面 这 个 Person 对 象 的 
例子 中 ， 有 两 个 数据 : 名 和 姓 ( 可 以 很 容易 地 添加 其 他 数据 ， 比 如 生日 、 电 子 邮 箱 等 )。this 关 
键 字 很 神奇 一 一 它 确保 了 创建 的 每 个 属性 都 会 成 为 对 象 的 一 部 分 。 

只 要 一 行 以 this 开 始 ， 紧 接 其 后 是 一 个 点 ， 就 可 以 写 任何 想 要 的 属性 名 。 所 以 下 面 这 个 例子 
是 一 个 同等 效力 的 Person 对 象 ， 保 存 了 同样 的 数据 ， 但 是 用 了 不 同 的 属性 名 : 


function Person() { 
this.F_name = "Joe"; 
this.L name = "Grapta"; 


} 
现在 可 以 用 person() 函 数 创建 新 的 Person 对 象 。 具 体 做 法 不 是 调用 函数 并 触发 它 的 代码 ， 而 
是 用 new 关 键 字 创建 这 个 函数 的 一 个 新 副本 ， 代 码 如 下 : 


// 创建 一 个 新 的 Person 对 象 ， 并 保存 在 名 为 joePerson 的 变量 中 
var joePerson = new Person(); 


一 旦 有 了 一 个 对 象 ， 就 可 以 通过 对 象 定义 函数 中 用 到 的 属性 名 访问 它 所 有 的 数据 : 


// 读 取 firstName 属 性 . 
alert("His name is " + joePerson.firstName); 






















































































// 修改 firstName 属 性 . 
joePerson.FirstName = "Joseph"; 


可 以 优化 一 下 这 个 对 象 定义 函数 , 以 便 可 以 通过 参数 设置 某 些 或 者 全 部 属性 的 值 。 这 样 就 不 
用 在 创建 对 象 之 后 再 写 儿 行 代码 来 配置 属性 的 值 。 这 样 也 确保 了 对 象 以 正确 的 状态 创建 出 来 ,如 
免 了 潜在 的 错误 。 优 化 后 的 代码 如 下 : 


function Person(fname, lname) { 
this.firstName = fname; 
this.lastName = lname; 























下 面 是 如 何 用 这 个 新 的 Person() 函 数 创建 两 个 对 象 : 


var newCustomer1 = new Person("Christy", "Shanks"); 
var newCustomer2 = new Person("Emilio", "Taginelle"); 


9.3.1 节 的 例子 完整 地 呈现 了 创建 对 象 的 基本 流程 ， 这 种 技术 也 贯穿 本 书 。 
B.2.11 ”对象 字面 量 


上 一 节 , 我 们 介绍 了 JavaScript 中 如 何 用 函数 创建 对 象 , 这 里 函数 发 挥 了 模板 的 作用 。 如 果 要 
正式 定义 构成 一 个 对 象 的 特性 , 使 用 函数 是 最 佳 方式 。 这样 会 让 代码 组 织 得 更 好 并 简化 复杂 的 代 
码 任务 。 如 果 需 要 在 代码 中 的 不 同 地 方 以 不 同方 式 使 用 对 象 , 这 是 最 佳 选择 。 但 有 时 我 们 需要 一 
种 快捷 的 方式 来 创建 对 象 ， 因为 只 用 一 次 。 这 种 情况 下 ， 对 象 字面 量 很 合适 ， 因 为 它 只 需要 一 对 
花 括 号 。 


对 象 字 面 量 由 以 下 三 部 分 构成 : 一 个 起 始 花 括 号 、 一 个 以 逗号 分 隔 




















II 


属性 列表 和 一 个 结束 花 
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括号 。 可 以 用 空格 和 换行 让 代码 更 易 读 ， 但 这 不 是 必需 的 。 下 面 是 个 例子 : 


var personObject = { 
firstName="Joe", 
lastName="Grapta" 


}; 

每 个 属性 ， 都 指定 了 属性 名 和 初始 值 。 上 面 的 代码 设置 person0bject.firstName 值 为 “Joe”， 
person0bject.1lastName 值 为 “Grapta”。 

13.1.4 节 的 例子 用 对 象 字 面 量 把 信息 发 送 给 地 理 定位 系统 。 只 要 使 用 了 正确 的 属性 名 
( getCurrentPosition() 方 法 要 求 这 样 )， 对 象 字面 量 就 能 运行 良好 。 








提示 。 如果 要 了 解 更 多 有 关 对 象 字面 量 、 对 象 函数 的 相关 信息 ， 以 及 JavaScript 中 自 定义 对 象 的 
任何 其 他 相关 信息 ， 可 以 参阅 www.javascriptkit.com/javatutors/oopjs.shtml 中 的 详细 介绍 。 


B.3 与 页 面 交 互 


好 , 现在 我 们 已 经 介绍 了 怎么 在 网 页 中 使 用 JavaScript。 可 是 , 我 们 还 没有 做 什么 有 意思 的 事 
儿 ( 事 实 上 ,除了 弹出 一 个 消息 框 , 啥 还 都 没 干 呢 ), 在 继续 深入 之 前 ,有 必要 先 了 解 一 下 JavaScript 
的 主要 角色 。 
首先 , 要 知道 JavaScript 代 码 是 在 沙 箱 里 运行 的 。 什么 意思 ?就 是 它 的 能 力 是 受 限 制 的 。 正 因 
为 如 此 ， 你 的 代码 不 能 在 访客 计算 机 上 执行 任何 有 风险 的 操作 ， 比 如 发 送 打印 命令 、 访 问 文件 、 
运行 其 他 程序 、 格 式 化 硬盘 ， 等 等 。 这 样 的 设计 确保 了 安全 性 ， 即 使 精心 大 意 的 用 户 也 不 会 面临 
风险 。 
那 JavaScript 能 做 什么 呢 ? 它 能 做 下 面 这 些 事 。 
口 更 新 页 面 。 脚 本 代码 可 以 改变 页 面 元 素 ， 删 除 页 面 元 素 ， 或 者 添加 新 页 面 元 素 。 事 实 上 ， 
JavaScript 可 以 修改 当前 显示 的 网 页 的 任何 细节 ， 甚 至 能 把 整个 文档 都 替换 掉 。 
口 从 服务 器 取得 数据 。JavaScript 可 以 向 来 源 页 面 所 在 的 服务 器 发 送 新 的 请 求 。 利 用 这 一 点 ， 
再 结合 上 述 技术 ， 就 可 创建 出 流畅 地 更 新 重要 信息 的 网 页 ， 比 如 显示 新 闻 或 股票 报价 。 
口 向 服务 器 发 送 数 据 。HTML 已 经 提供 了 一 种 向 服务 器 发 送 数 据 的 方式 , 那 就 是 表单 (参见 
第 4 章 )。 不 过 ，JavaScript 则 为 此 提供 了 一 种 巧妙 的 方式 。 你 可 以 从 表单 控件 取得 数据 ， 
验证 这 些 数 据 ， 然 后 再 把 它们 发 送 给 服务 器 。 但 这 些 操作 不 会 刷新 页 面 。 
后 两 种 技术 都 要 用 到 XMLHttpRequest 对 象 ，12.1.1 节 介绍 过 该 对 象 。 在 接 下 来 几 节 中 , 我 们 主 
要 介绍 第 一 种 技术 ， 这 是 几乎 所 有 使 用 JavaScript 页 面 的 根本 所 在 。 


B.3.1 操作 元 素 


在 JavaScript 的 眼 里 , 你 的 页 面 可 不 仅仅 是 一 个 静态 的 HTML 块 。 相反， 页 面 中 的 每 个 元 素 都 
是 一 个 对 象 ， 可 以 通过 JavaScript 代 码 检测 和 修改 。 
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取得 页 面 中 对 象 的 最 简单 方式 就 是 通过 一 个 唯一 的 名 字 找 到 它 ， 这 个 唯一 的 名 字 就 是 ID 
性 。 下 面 就 是 一 个 例子 : 

<h1 id="pageTitle">Welcome to My Page</h1> 

像 这 样 给 元 素 一 个 唯一 的 ID 后 ， 就 可 以 在 代码 中 轻易 地 找到 它 ， 然 后 再 通过 JavaScript 操 
作 它 。 

JavaScript 为 寻找 对 象 提 供 了 简单 的 方法 : document.getElementById()。 这 里 的 document 对 象 
表示 的 是 整个 HTML 文 档 。 这 个 对 象 始终 是 可 以 访问 到 的 ,任何 时 候 只 要 你 想 用 都 可 以 直接 引用 
它 。 与 其 他 对 象 一 样 ，document 对 象 提 供 了 一 些 有 用 的 属性 和 方法 。 其 中 ，getElementById() 是 
最 棒 的 那 一 个 ， 它 可 以 扫描 整个 页 面 ， 从 中 找到 特定 的 元 素 。 
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注意 ”如果 你 熟 驴 基本 的 面向 对 象 编程 ， 对 属性 和 方法 肯定 不 会 陌生 。 但 如 果 你 不 熟悉 的 话 ， 
我 可 以 告诉 你 ， 属 性 就 是 添加 给 对 象 的 数据 ， 而 方法 就 是 对 象 内 置 的 函数 。 





在 调用 document .getElementById() 方 法 时 ， 要 给 它 提 供 一 个 HTML 元 素 的 ID ， 以 便 查 找 。 下 
面 这 个 例子 会 在 页 面 中 查找 ID 为 pageTitle 的 HTML 元 素 : 

var title0bject = document.getElementById("pageTitle"); 

这 样 ,代码 会 找到 前 面 看 到 的 那个 ch1> 元 素 , 把 它 保存 在 一 个 名 为 title0bject 的 变量 中 。 通 
过 把 对 象 保 存在 变量 中 ， 就 可 以 随时 对 它 进行 操作 ， 而 不 必 每 次 都 重新 去 找 它 了 。 

那 我 们 可 以 对 HTML 对 象 执行 什么 操作 呢 ?” 从 某 种 角度 讲 , 可 以 执行 的 操作 取决 于 元 素 的 类 
型 。 例 如 ,对 超 链 接 来 说 ， 可 以 改变 它 的 URL。 如 果 是 图 片 ， 可 以 改变 其 来 源 地 址 。 男 外 ,还 有 
一 些 操 作 是 适用 于 所 有 HTML 元 素 的 ， 比 如 修改 样式 或 者 出 现在 开始 和 结束 标签 中 间 的 文本 内 
容 。 稍 后 我 们 就 会 介绍 ,这 些 技巧 对 于 创建 动态 页 面 是 非常 有 用 的 一 一 比如 ,可 以 在 访客 执行 某 
个 操作 时 ( 比如 点 击 链接 时 ) 改变 页 面 。 类 似 这 样 的 交互 功能 ， 可 以 让 访客 感觉 自己 面 对 的 是 一 
个 智能 的 、 响 应 性 的 程序 ， 而 非 一 个 呆板 、 简 单 的 网 页 。 

要 修改 刚才 提 到 的 <h1> 元 素 的 文本 ， 可 以 像 下面 这 样 做 : 

title0bject.innerHTML = "This Page Is Dynamic"; 

以 上 代码 用 到 了 一 个 名 为 innerHTML 的 属性 ， 该 属性 用 于 设置 元 素 包 含 的 内 容 ( 对 这 个 例子 
来 说 , 就 是 ch1> 元 素 中 的 页 面 标题 ), 与 其 他 属性 一 样 ，innerHTML 只 是 HTML 众 多 属性 中 的 一 个 。 
要 写 出 类 似 这 样 的 语句 ， 必 须知 道 JavaScript 允 许 你 访问 哪些 属性 。 

很 明显 ， 有 些 属性 只 适用 于 特定 的 HTML 元 素 ， 比 如 src 属 性 用 于 给 <img> 元 素 加 载 新 图 片 : 


var imgObject = document.getElementById("dayImage"); 
dayImage.src = "cloudy.jpg"; 


另外 ， 也 可 以 通过 style 对 象 来 修改 CSS 样 式 : 
titleObject.style.color = "rgb(0,191,255)"; 


现代 浏览 器 一 般 都 会 提供 大 量 DOM 属 性 ， 适 用 于 几乎 所 有 HTML 元 素 。 表 B-3 列 出 了 其 中 最 
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有 用 的 一 些 属性 。 





属 性 


表 B-3 ”常用 的 HTML 对 象 属性 


说 明 





className 


innerHTML 


parentELement 


style 


tagName 


用 于 取得 和 设置 class 属 性 (参见 A.2.2 节 ) 。 换 名 话说 ， 这 个 属 习 
么 样式 (如果 针对 相应 的 类 设置 了 样式 ) 。 当 然 ， 
否则 只 会 看 到 简单 的 默认 样式 

用 于 读 取 或 修改 元 素 内 部 的 HTML 标 记 。 这 个 属性 极为 有 用 ， 但 攻 
先 ， 可 以 通过 它 来 设置 所 有 HIML 内 容 ， 包 括 文本 和 标签 。 
加 粗 ， 可 以 将 innerHTML 设 置 成 <b>Hi</b> 。 








E 用 于 确定 元 素 会 使 用 什 
你 得 通过 先入 或 链接 样式 表 定 义 样式 ， 











有 两 个 要 点 要 注意 。 广 
段落 中 的 某 个 词 
其 次 ， 在 设置 innerHTML 时 ， 会 替换 元 素 内 部 


















































的 所 有 内 容 ， 包 括 其 他 HTML 元 素 。 也 就 是 说 ， 如 果 设 置 了 包含 一 些 段 落 和 图 片 的 <div> 


元 素 的 inneYHTML 


保存 着 包含 当前 元 素 的 元 素 对 应 的 HTML 对 象 。 例如， 当前 元 素 是 段落 
Pp 个 <p> 元 素 。 取 得 了 这 个 父 元 素 后 ， 








这 个 属性 中 保存 的 就 是 丸 























性 ， 那 么 这 些 段 落 和 图 片 最 终 都 会 消失 ， 代 之 以 新 设置 














<b> 元 素 , 那么 
它 


保存 有 所 有 CSS 属 性 ,决定 着 相应 HTML 元 素 的 外 观 。 技 术 上 讲 ，style 属 性 会 返回 完整 的 


样式 对 象 ， 如 果 想 修改 其 
myElement.style.fontS 
保存 当前 对 象 的 HTML 元 素 的 标签 名 ， 不 弄 
元 素 ， 那 么 这 个 属性 会 返回 文本 "img" 

















中 的 样式 ， 需 要 加 上 点 (.) 逢 
属性 来 修改 颜色 、 边 框 、 


入 尖 括号 。 例 如 ， 当 前 对 象 如 果 表 示 一 个 <img> 


























[要 修改 的 样式 属性 的 名 字 ， 比 如 
字体 ， 甚 至 定位 





提示 HTML 元 素 也 具备 一 些 有 用 的 方法 ， 其 中 一 些 可 以 修改 属性 ， 比 如 getAttribute() 和 
setAttribute();。 还 有 一 些 可 以 添加 和 删除 元 素 ， 如 insertChild()、appendChild() 和 
removeChild()。 要 了 解 具体 元 素 支持 的 属性 和 方法 , 请 参考 这 里 : http://developer.mozilla.org/ 


DOMVelement。 


B.3.2 动态 连接 事件 


在 B.1.4 节 ， 我 们 看 到 了 如 何 通 过 事件 属 






































以 把 事件 与 函数 关联 起 来 。 





多 数 情况 下 ,你 可 能 都 会 使 用 事件 




















日 有 些 情况 下 ,使 用 事件 属性 不 太 可 能 ， 





生来 连接 函数 。 但 是 ， 通 过 JavaScript 代 码 照 样 也 可 


或 者 不 太 











方便 。 比 如 ， 当 你 通过 代码 创建 了 一 个 HTML 对 象 并 将 其 动态 添加 到 页 面 之 后 ， 就 不 可 能 再 通过 

















事件 属性 来 绑 定 处 理 
于 动态 创建 HTML 对 
对 象 而 非 HTML 元 素 添加 事件 时 ， 也 不 可 能 使 用 
子 。) 基于 以 上 原因 ， 理 解 怎 样 通过 代码 来 连接 事件 就 非常 重要 了 。 


注意 ”添加 事件 处 理 程序 的 方式 有 好 几 种 ， 但 并 不 是 所 有 浏览 
用 事件 属性 的 方式 ， 这 是 所 有 浏 











E 序 。 此 时 , 页 面 中 没有 新 元 素 的 标记 , 也 没有 地 方 让 你 添加 事件 
| 象 ， 可 以 参考 第 8 章 中 关于 Canvas 绘 图 的 相关 内 容 。) 再 比如 ， 在 需要 给 内 置 
E。( 可 以 参考 第 10 章 处 理 存储 事件 的 例 


























mu 

















属性 。( 关 


都 支持 这 些 方式 。 本 节 恰 好 使 
都 支持 的 。 但 如 果 你 在 使 用 jQuery 等 JavaScript 工 具 


包 ， 那 么 也 可 能 会 用 到 它 的 另 一 套 事 件 绑 定 机 制 ， 这 套 机 制 不 仅 所 有 浏览 器 都 支持 ， 而 
且 还 具备 其 他 一 些 功能 。 
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河 
旦 


好 在 添加 事件 非常 简单 ， 只 要 像 添加 事件 属性 ( property ) 一 样 ， 在 代码 中 设置 事件 属 
(attribute ) 即 可 。 例 如 ,假设 你 的 页 面 中 有 如 下 <img> 元 素 : 

<img id="dayImage" src="sunny.jpg" alt="The weather"> 

如 果 你 想 让 用 户 单 击 这 张 图 片 时 调用 swapImage() 也 数 ， 那 么 可 以 这 样 : 


var imgObject = document.getElementById("dayImage"); 
imgObject.onclick = swapImage; 


不 过 , 千 万 不 要 犯 这 样 的 错误 : 

imgObject.onclick = swapImage(); 

这 样 会 运行 swapInage() 函数 ， 得 到 返回 的 结果 ( 如 果 该 两 数 有 返回 值 的 话 )， 然 后 用 该 机 数 
返回 的 结果 设置 事件 处 理 程序 。 这 肯定 不 是 你 想 要 的 。 

要 理解 用 户 单 击 cimg> 元 素 时 会 发 生 什 么 ,需要 看 一 看 swapImage() 孙 数 的 代码 。 这 个 函数 会 
取得 cimg> 元 素 ， 然 后 修改 它 的 src 属 性 以 指向 新 图 片 (参见 图 B-3 ): 


// 记 录 下 从 和 白天 到 晚上 是 否 更 换 了 图 片 
var dayTime = true; 






































// 这 个 函数 会 在 onClick 事 件 发 生 时 执行 
function swapImage() { 
var imgObject = document.getElementById("dayImage"); 


// 和 白天 到 晚上 ， 或 晚上 到 白天 都 要 更 换 图 片 
if (dayTime == true) { 

dayTime = false; 

imgObject.src = "cloudy.jpg"; 


else { 
dayTime = true; 
imgObject.src = "sunny.jpg"; 
} 
有 了 时候, 事件 会 给 事件 处 理 程序 传递 有 价值 的 信息 。 要 使 用 这 些 信息 , 需要 为 事件 处 理 程序 
添加 一 个 参数 。 按 照 惯例 ， 这 个 参数 通常 命名 为 event 或 干脆 命名 为 e: 


function swapImage(e) { 











} 
这 个 事件 对 象 有 哪些 属性 ， 取 决 于 具体 的 事件 。 例 如 ， 对 于 onMouseMove 事 件 ， 其 事件 对 象 
会 提供 鼠标 的 当前 坐标 值 ( 利用 这 个 坐标 值 可 以 创建 类 似 8.2 节 的 绘画 程序 )。 
还 有 一 点 值得 注意 。 如 果 代 码 连接 到 了 事件 , 那 你 必须 把 整个 事件 名 小 写 。 这 一 点 与 在 HTML 
中 使 用 事件 属性 是 不 一 样 的 。 与 JavaScript 不 同 ，HTML 不在乎 大 小 写 问 题 。 
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ES 图 B-3: 单 击 页 面 就 会 触发 事件 ， 该 事件 会 
一 调用 一 个 函数 ， 该 函数 会 加 载 新 图 片 


€ CG Q ManipulateAnElementhtml NA 











图 Manipulate An Element 

















Ctck this picture to change sun to cloud (and back). 




















注意 本 书 的 事件 采用 了 容易 看 懂 的 驼峰 式 大 小 写 方式 ， 即 每 个 单词 的 首 字母 大 写 ( 如 onLoad 
或 onMouse0ver )。 不 过 ， 在 脚本 代码 中 ， 所 有 事件 都 采用 了 小 写 形式 ( 如 onload 和 
onmouseover )， 因 po 


B.3.3 骨 入 事件 


为 了 证 前面 的 例子 运行 起 来 ， 必 须 在 代码 中 的 某 个 位 置 定义 swapImage() 函 数 。 有 时 候 ， 可 
能 需要 跳 过 这 一 步 ， 直 接 在 想 要 添加 事件 处 理 程序 时 定义 函数 。 这 种 技术 就 叫做 嵌入 函数 。 
以 下 是 一 个 为 onclick 事 件 添加 髋 入 函数 的 例子 : 


var imgObject = document.getElementById("dayImage"); 
imgObject.onclick = function() { 
// 原 来 swapImage() 函 数 的 代码 
// 现 在 放 在 这 里 了 
if (dayTime == true) { 
dayTime = false; 
imgObject.src = "cloudy.jpg"; 
} 
else { 
dayTime == true; 
imgObject.src = "sunny.jpg"; 
} 
}; 


这 种 快捷 写法 比 使 用 独立 的 命名 函数 少见 一 点 , 但 这 种 方式 仍然 是 非常 方便 的 , 本 书 示例 偶 
尔 会 用 到 这 种 写法 。 
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注意 许 入 函数 在 处 理 蜡 步 任务 时 会 很 有 用 ， 异步 任务 就 是 在 后 侣 执行 的 任务 。 当 异步 任务 完 
成 时 ， 浏 览 器 会 触发 事件 ， 通 知 执行 相应 的 代码 。 有 时 候 ， 处 理 这 种 情况 的 最 清楚 的 方 
式 ， 就 是 在 任务 开始 的 位 置 放置 处 理 任务 完成 的 代码 。( 7.1.1 节 有 一 个 例子 ， 展 示 了 异步 
加 载 和 处 理 图 片 ， 可 以 作为 参考 。) 





最 后 ， 有 一 个 能 入 函数 的 例子 在 本 书 很 多 示例 中 都 用 到 了 。 那 就 是 window 对 象 的 onLoad 事 件 
处 理 程 序 ， 该 函数 会 在 页 面 加 载 、 显 示 、 准 备 就 绪 时 执行 。 此 时 ， 正 好 是 代码 披挂 上 阵 的 时 候 。 
如 果 在 此 之 前 运行 代码 ， 可 能 会 遇 到 问题 ， 比 如 对 应 某 些 元 素 的 对 象 还 没有 创建 完成 : 








<script> 
window.onload = function() { 
alert("The page has just finished loading.); 


</script> 
使 用 这 种 方式 ， 可 以 不 必 担 心 脚本 块 的 位 置 。 你 照样 可 以 把 初始 化 代码 放 在 chead> 区 块 中 ， 
与 其 他 JavaScript 函 数 放 在 一 起 。 
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The book that should have been in the boxs 





Matthew 
MacDonald 
著名 科技 作家 、 程 序 


; , ee ， 员 ， 扎 写 过 十 儿 部 技 
不 依赖 插件 添加 音频 和 视频 ， 构 建 适用 于 所 有 浏览 器 的 播放 页 二 





而 ， 设计 》 《精通 ASP.NET 4.5 (第 5 
用 Canvas 创 建 吸引 人 的 视觉 效果 ， 绘 制图 形 、 图 像 、 文 本 ， 播 版 ) 》， 以 及 Missing Manual 系 列 图 
放 动 画 ， 运 行 交 互 游戏 ; 书 之 Creatinga Website、WordPress、 
i N A Access 2013、QOffice 2013、Excel 
用 CSS3 将 页 面 变 活 泼 ， 比 如 添加 新 奇 的 字体 ， 利 用 变换 和 动画 2013、Your Brain 和 Your Body 等 。 
添加 吸引 人 的 效果 ， 他 的 个 人 网 站 是 prosetech.com 。 
设计 更 出 色 的 Web 表 单 ， 利 用 HTML5 新 增 的 表单 元 素 更 加 高 效 
地 收集 访客 信息 ; 


一 次 开发 ， 多 平台 运行 ， 实 现 响应 式 设计 ， 创 建 适 配 桌面 计算 
机 、 平 板 电脑 和 智能 手机 的 网 站 ， 

让 Web 应 用 拥有 桌面 应 用 的 特性 ， 通 过 开发 自给 自足 的 离线 应 
用 ， 无 论 用 户 能 否 上 网 ， 都 可 以 在 本 地 保存 用 户 信息 。 


图 灵 社 区 : iTuring.cn O RE | LLY” 


missingmanuals.com 
计算 机 /Web 开 发 /HTML5 ISBN 978-7-115-32050-6 
人 民 邮 电 出 版 社 网 址 : www.ptpress.com.cn | | | 
9 "787115"320506"> 


O'Reilly Media, Inc. 授 权 人 民 邮 电 出 版 社 出 版 


热线 : (010)51095186 转 600 


此 简体 中 文 版 仅 限于 中 国 大 陆 (不 包含 中 国 香港 、 澳 门 特别 行政 区 和 中 国 台湾 地 区 ) 销售 发 行 ISBN 978-7-115-32050-6 
This Authorized Edition for sale only in the territory of People's Republic of China (excluding 2 = 
Hong Kong, Macao and Taiwan) 定价 ; 89.00 元 








看 完了 


如 果 您 对 本 书 内 容 有 疑问 ， 可 发 邮件 至 contact@turingbook.com， 会 有 编辑 或 作 译 者 协助 
答疑 。 也 可 访问 图 灵 社 区 ， 参 与 本 书 讨论 。 


如 果 是 有 关 电 子 书 的 建议 或 问题 ， 请 联系 专用 客服 邮箱 : ebook@turingbook.com。 
在 这 里 可 以 找到 我 们 : 


微 博 @ 图 灵 教 育 : 好 书 、 活 动 每 日 播报 

微 博 @ 图 灵 社 区 : 电子 书 和 好 文章 的 消息 

微 博 @ 图 灵 新 知 : 图 灵 教 育 的 科普 小 组 

微 信 图 灵 访 谈 : ituring_interview， 讲 述 码 农 精彩 人 生 
微 信 图 灵 教 育 : turingbooks 


